@import 'shared/colors';

$fab-font-size: 20px;
$fab-size: 64px;
$fab-gutter: 10px;
$fab-height: $fab-size + $fab-gutter * 2;
$fab-offset: ($fab-height - $fab-font-size) / 2 - 3px;

// --keyboard-height 會在鍵盤打開時被設定 (詳見 app.component.ts)
.fab-vertical-bottom {
  bottom: calc(24px + var(--keyboard-height, 0px));
}

.fab-horizontal-end {
  right: 20px;
}

.fab-button-close-active {
  --ion-color-primary: #{get-color(gr-400)};
  transform: translateX(1px) translateY(-2px) scale(0.7);
  &::part(close-icon) {
    color: get-color(bk-400);
  }
}

.fab-list-active {
  ion-label {
    position: absolute;
    right: $fab-height;
    color: get-color(w-50);
    font-size: $fab-font-size;
    text-align: right;
    white-space: nowrap !important;
    // 文字點下去會觸發 fab 關閉，導致樣式消失背景色被移除
    pointer-events: none;
    @for $i from 0 through 2 {
      &:nth-child(3n + #{$i + 1}) {
        bottom: $fab-offset + $i * $fab-height;
      }
    }
  }

  ion-fab-button {
    width: $fab-size;
    height: $fab-size;
    margin: $fab-gutter 0;
    --color: #{get-color(w-50)};
    @include btn-basic-style(or-550, or-600);

    &[type='negative'] {
      @include btn-basic-style(gb-500, gb-700);
    }
  }
}