@import 'shared/colors';
@import 'shared/fonts';

$btn-disabled-opacity: 0.4;

/** 按鈕顏色 */
@mixin btn-basic-style($color, $action-color) {
  display: block;
  --background: #{get-color($color)};
  --background-activated: #{get-color($action-color)};
  --background-focused: #{get-color($action-color)};
  --background-hover: #{get-color($action-color)};
}

/** Text Button 的樣式 */
@mixin btn-text-style($text-color, $text-size, $text-weight) {
  --color: #{get-color($text-color)};
  font-weight: get-uofx-text-weight($text-weight);
  --background-hover: transparent;
  --background-activated: transparent;
  --background-focused: transparent;
  @include uofx-text-size($text-size);

  width: auto;
  height: auto;
  --background: transparent;
  &::part(native) {
    text-decoration: underline;
    padding: 2px 8px;
  }
}

ion-button {
  min-width: 44px;
  min-height: 44px;
  height: 44px;
  margin: 0;
  &::part(native) {
    border-radius: 10px;
  }

  &.button-disabled {
    opacity: $btn-disabled-opacity;
  }

  &.uofx-btn-primary {
    @include text-type(w, st2, m);
    @include btn-basic-style(or-550, or-600);

    &.outline {
      @include text-type(pr, st2, m);

      &::part(native) {
        border: 2px solid get-color(or-550);
      }
      @include btn-basic-style(w-50, or-50);
    }
  }

  &.uofx-btn-primary-2 {
    @include text-type(pr, st2, m);
    @include btn-basic-style(or-50, or-100);
  }

  &.uofx-btn-2rd {
    @include text-type(w, st2, m);
    @include btn-basic-style(gb-500, gb-700);
  }

  &.uofx-btn-3rd {
    @include text-type(2, b1, m);
    @include btn-basic-style(bk-100, bk-150);
  }

  uofx-icon:not([slot='icon-only']) {
    margin-right: 8px;
  }

  &.uofx-btn-icon {
    width: 44px;
    min-width: 44px;
    margin: 0px;
    --background: transparent;
    --background-activated: transparent;
    --background-focused: transparent;
    --background-hover: transparent;
    --box-shadow: transparent;

    &::part(native) {
      padding: 0px;
    }
  }

  &.uofx-btn-filter {
    margin: 0 8px 0 0;
    width: 52px;
    height: 38px;
    min-height: 38px;
    // uofx-btn-3rd 的樣式
    @include btn-basic-style(bk-100, bk-150);
    &::part(native) {
      padding: 0;
    }
  }

  &.uofx-btn-extra {
    @include uofx-text-size(b1);
    font-weight: get-uofx-text-weight(m);
    --color: #{get-color(or-600)};
    --background: #{get-color(w-50)};
    --background-activated: #{get-color(w-50)};
    --background-focused: #{get-color(w-50)};
    --background-hover: #{get-color(w-50)};

    &::part(native) {
      padding: 2px 8px;
      border-radius: 20px;
    }

    // 個人化首頁相關使用的樣式 (間距較寬 + 下陰影)
    &.home-extra {
      &::part(native) {
        box-shadow: var(--uofx-box-shadow-down);
        padding: 10px 20px;
      }
    }

    &.small {
      width: auto;
      height: 24px;
      min-height: 24px;
    }
  }

  &.uofx-btn-text-1 {
    @include btn-text-style(bl-500, b1, m);
    --border-radius: 0px;
    &::part(native) {
      padding: 2px 0px;
    }
  }

  &.uofx-btn-text-2 {
    @include btn-text-style(x-bl11, b1, m);
  }

  &.uofx-btn-text-3 {
    @include btn-text-style(bk-500, st2, m);
  }
}