fab.scss

/**
 * CSS Custom Properties
 *
 * These properties can be overridden using the component's tag as selector.
 *
 * @prop --calcite-fab-background-color: Specifies the component's background color.
 * @prop --calcite-fab-border-color: Specifies the component's border color.
 * @prop --calcite-fab-corner-radius: Specifies the component's corner radius.
 * @prop --calcite-fab-text-color: Specifies the component's text color.
 * @prop --calcite-fab-loader-color: Specifies the component's loader color.
 * @prop --calcite-fab-shadow: Specifies the component's shadow.
 */

:host {
  @apply flex;

  background-color: transparent;
}

@include disabled();

calcite-button {
  --calcite-fab-shadow-internal: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
  box-shadow: var(--calcite-fab-shadow, var(--calcite-fab-shadow-internal));

  &:hover {
    @apply shadow-2-lg;
  }
  &:active {
    @apply shadow-2-sm;
  }

  --calcite-button-background-color: var(--calcite-fab-background-color);
  --calcite-button-border-color: var(--calcite-fab-border-color);
  --calcite-button-corner-radius: var(--calcite-fab-corner-radius);
  --calcite-button-text-color: var(--calcite-fab-text-color);
  --calcite-button-loader-color: var(--calcite-fab-loader-color);
}

@include base-component();