@use '../../mixins' as mixins;
@use '../../variables' as *;
@use '../../compat-tokens-mixins' as compatMixins;

@include compatMixins.sky-modern-overrides('.sky-btn', false) {
  --sky-override-borderless-icon-size: 26px;
  --sky-override-button-icon-borderless-padding: 1px;
  --sky-override-button-icon-padding: 9px 15px;
  --sky-override-button-link-inline-border-radius: 0;
  --sky-override-button-link-inline-color-disabled: var(
    --sky-color-text-action
  );
  --sky-override-button-link-inline-color-hover-active: var(
    --sky-text-color-action-primary-hover
  );
  --sky-override-button-link-inline-font-size: var(--sky-font-size-body-m);
  --sky-override-button-link-inline-vertical-align: top;
  --sky-override-button-padding: 9px 21px;

  --sky-override-button-primary-disabled-box-shadow: inset 0 0 0
      var(--sky-border-width-action-focus)
      var(--sky-color-border-action-primary-focus),
    var(--sky-elevation-focus);
  --sky-override-button-icon-disabled-box-shadow: inset 0 0 0
      var(--sky-border-width-action-focus)
      var(--sky-color-border-action-secondary-focus),
    var(--sky-elevation-focus);
  --sky-override-button-danger-disabled-box-shadow: inset 0 0 0
      var(--sky-border-width-action-focus)
      var(--sky-color-border-action-danger-focus),
    var(--sky-elevation-focus);
  --sky-override-button-tertiary-disabled-box-shadow: inset 0 0 0
      var(--sky-border-width-action-focus)
      var(--sky-color-border-action-tertiary-focus),
    var(--sky-elevation-focus,);
  --sky-override-button-link-inline-disabled-box-shadow: 0 0 0
      var(--sky-border-width-action-focus)
      var(--sky-color-border-action-tertiary-focus),
    var(--sky-elevation-focus);
  --sky-override-button-borderless-inline-disabled-box-shadow: 0 0 0
      var(--sky-border-width-action-focus)
      var(--sky-color-border-action-tertiary-focus),
    var(--sky-elevation-focus);

  &:not(.sky-btn-link-inline):not(.sky-btn-borderless-inline) {
    --sky-override-button-line-height: calc(20 / 14);
  }

  &.sky-btn-link-inline,
  &.sky-btn-borderless-inline {
    --sky-override-button-line-height: normal;
    --sky-override-button-opacity-disabled: 0.65;
  }
}

@include compatMixins.sky-modern-overrides('.sky-btn-tab', false) {
  --sky-override-tab-selected-background-color: var(--modern-color-transparent);
  --sky-override-tab-selected-border-bottom-size: var(--modern-size-3);
  --sky-override-tab-hover-border-bottom-color: var(--modern-color-blue-50);
  --sky-override-tab-disabled-background-color: var(--modern-color-transparent);
  --sky-override-tab-disabled-font-size: 15px;
  --sky-override-tab-button-radius: 0;
  --sky-override-tab-line-height: 1.8;
  --sky-override-selected-dropdown-item-border-width: var(--modern-size-3);
  --sky-override-selected-dropdown-background-color: var(
    --modern-color-transparent
  );
}

.sky-theme-modern {
  .sky-btn {
    border: none;
    border-radius: var(--sky-border-radius-s);
    font-size: var(--sky-font-size-body-m);
    transition: box-shadow $sky-transition-time-short;

    line-height: var(
      --sky-override-button-line-height,
      var(--sky-font-line_height-body-m)
    );
  }

  .sky-btn-default,
  .sky-btn-primary,
  .sky-btn-danger,
  .sky-btn-link,
  .sky-btn-borderless {
    padding: var(
      --sky-override-button-padding,
      var(--sky-space-inset-pillarbox-1_2-top-m)
        var(--sky-space-inset-pillarbox-1_2-right-m)
        var(--sky-space-inset-pillarbox-1_2-bottom-m)
        var(--sky-space-inset-pillarbox-1_2-left-m)
    );
  }

  .sky-btn-default,
  .sky-btn-primary,
  .sky-btn-danger,
  .sky-btn-link,
  .sky-btn-borderless,
  .sky-btn-icon-borderless,
  .sky-btn-icon,
  .sky-btn-link-inline,
  .sky-btn-borderless-inline {
    border: none;
    outline: none;

    &:hover {
      text-decoration: none;
    }

    &.sky-btn-disabled,
    &[disabled] {
      &,
      &:hover,
      &:focus-visible,
      &.sky-btn-focus,
      &:active,
      &.sky-btn-active {
        border: none;
        opacity: var(--sky-override-button-opacity-disabled, 1);
        color: var(--sky-color-text-deemphasized);

        &.sky-btn-link-inline {
          color: var(
            --sky-override-button-link-inline-color-disabled,
            var(--sky-color-text-default)
          );
        }
      }
    }
  }

  .sky-btn-icon {
    padding: var(
      --sky-override-button-icon-padding,
      var(--sky-space-inset-balanced-s)
    );
  }

  .sky-btn-default,
  .sky-btn-icon {
    background-color: var(--sky-color-background-action-secondary-base);
    color: var(--sky-color-text-default);
    box-shadow: inset 0 0 0 var(--sky-border-width-action-base)
      var(--sky-color-border-action-secondary-base);

    &:hover {
      background-color: var(--sky-color-background-action-secondary-hover);
      box-shadow: inset 0 0 0 var(--sky-border-width-action-hover)
        var(--sky-color-border-action-secondary-hover);
    }

    &:active,
    &.sky-btn-active {
      background-color: var(--sky-color-background-action-secondary-active);
      box-shadow: inset 0 0 0 var(--sky-border-width-action-active)
        var(--sky-color-border-action-secondary-active);
    }

    &:focus-visible:not(:active) {
      background-color: var(--sky-color-background-action-secondary-focus);
      box-shadow:
        inset 0 0 0 var(--sky-border-width-action-focus)
          var(--sky-color-border-action-secondary-focus),
        var(--sky-elevation-focus);
    }

    &.sky-btn-disabled,
    &[disabled] {
      &,
      &:hover,
      &:focus-visible,
      &.sky-btn-focus,
      &:active,
      &.sky-btn-active {
        box-shadow: inset 0 0 0 var(--sky-border-width-action-disabled)
          var(--sky-color-border-action-secondary-disabled);
        background-color: var(--sky-color-background-action-secondary-disabled);

        &:is(:focus-visible, .sky-btn-focus) {
          box-shadow: var(
            --sky-override-button-icon-disabled-box-shadow,
            inset 0 0 0 var(--sky-border-width-action-disabled)
              var(--sky-color-border-action-secondary-disabled)
          );
        }
      }
    }
  }

  .sky-btn-primary {
    background-color: var(--sky-color-background-action-primary-base);
    color: var(--sky-color-text-inverse);
    box-shadow: inset 0 0 0 var(--sky-border-width-action-base)
      var(--sky-color-border-action-primary-base);

    &:hover {
      background-color: var(--sky-color-background-action-primary-hover);
      box-shadow: inset 0 0 0 var(--sky-border-width-action-hover)
        var(--sky-color-border-action-primary-hover);
    }

    &:active,
    &.sky-btn-active {
      background-color: var(--sky-color-background-action-primary-active);
      box-shadow: inset 0 0 0 var(--sky-border-width-action-active)
        var(--sky-color-border-action-primary-active);
    }

    &:focus-visible:not(:active) {
      background-color: var(--sky-color-background-action-primary-focus);
      box-shadow:
        inset 0 0 0 var(--sky-border-width-action-focus)
          var(--sky-color-border-action-primary-focus),
        var(--sky-elevation-focus);
    }

    &.sky-btn-disabled,
    &[disabled] {
      &,
      &:hover,
      &:focus-visible,
      &.sky-btn-focus,
      &:active,
      &.sky-btn-active {
        box-shadow: inset 0 0 0 var(--sky-border-width-action-disabled)
          var(--sky-color-border-action-primary-disabled);
        background-color: var(--sky-color-background-action-primary-disabled);

        &:is(:focus-visible, .sky-btn-focus) {
          box-shadow: var(
            --sky-override-button-primary-disabled-box-shadow,
            inset 0 0 0 var(--sky-border-width-action-disabled)
              var(--sky-color-border-action-primary-disabled)
          );
        }
      }
    }
  }

  .sky-btn-danger {
    background-color: var(--sky-color-background-action-danger-base);
    color: var(--sky-color-text-inverse);
    box-shadow: inset 0 0 0 var(--sky-border-width-action-base)
      var(--sky-color-border-action-danger-base);

    &:hover {
      background-color: var(--sky-color-background-action-danger-hover);
      box-shadow: inset 0 0 0 var(--sky-border-width-action-hover)
        var(--sky-color-border-action-danger-hover);
    }

    &:active,
    &.sky-btn-active {
      background-color: var(--sky-color-background-action-danger-active);
      box-shadow: inset 0 0 0 var(--sky-border-width-action-active)
        var(--sky-color-border-action-danger-active);
    }

    &:focus-visible:not(:active) {
      background-color: var(--sky-color-background-action-danger-focus);
      box-shadow:
        inset 0 0 0 var(--sky-border-width-action-focus)
          var(--sky-color-border-action-danger-focus),
        var(--sky-elevation-focus);
    }

    &.sky-btn-disabled,
    &[disabled] {
      &,
      &:hover,
      &:focus-visible,
      &.sky-btn-focus,
      &:active,
      &.sky-btn-active {
        box-shadow: inset 0 0 0 var(--sky-border-width-action-disabled)
          var(--sky-color-border-action-danger-disabled);
        background-color: var(--sky-color-background-action-danger-disabled);

        &:is(:focus-visible, .sky-btn-focus) {
          box-shadow: var(
            --sky-override-button-danger-disabled-box-shadow,
            inset 0 0 0 var(--sky-border-width-action-disabled)
              var(--sky-color-border-action-danger-disabled)
          );
        }
      }
    }
  }

  .sky-btn-link {
    color: var(--sky-color-text-action);
  }

  .sky-btn-borderless,
  .sky-btn-icon-borderless {
    color: var(--sky-color-icon-deemphasized);
  }

  .sky-btn-icon-borderless {
    padding: var(
      --sky-override-button-icon-borderless-padding,
      var(--sky-space-inset-balanced-xs)
    );
    height: var(--sky-override-borderless-icon-size, '');
    width: var(--sky-override-borderless-icon-size, '');
  }

  .sky-btn-link,
  .sky-btn-borderless,
  .sky-btn-icon-borderless {
    background-color: var(--sky-color-background-action-tertiary-base);
    box-shadow: inset 0 0 0 var(--sky-border-width-action-base)
      var(--sky-color-border-action-tertiary-base);

    &:hover {
      background-color: var(--sky-color-background-action-tertiary-hover);
      box-shadow: inset 0 0 0 var(--sky-border-width-action-hover)
        var(--sky-color-border-action-tertiary-hover);
    }

    &:active,
    &.sky-btn-active {
      background-color: var(--sky-color-background-action-tertiary-active);
      box-shadow: inset 0 0 0 var(--sky-border-width-action-active)
        var(--sky-color-border-action-tertiary-active);
    }

    &:focus-visible:not(:active) {
      background-color: var(--sky-color-background-action-tertiary-focus);
      box-shadow:
        inset 0 0 0 var(--sky-border-width-action-focus)
          var(--sky-color-border-action-tertiary-focus),
        var(--sky-elevation-focus);
    }

    &.sky-btn-disabled,
    &[disabled] {
      &,
      &:hover,
      &:focus-visible,
      &.sky-btn-focus,
      &:active,
      &.sky-btn-active {
        box-shadow: inset 0 0 0 var(--sky-border-width-action-disabled)
          var(--sky-color-border-action-tertiary-disabled);
        background-color: var(--sky-color-background-action-tertiary-disabled);

        &:is(:focus-visible, .sky-btn-focus) {
          box-shadow: var(
            --sky-override-button-tertiary-disabled-box-shadow,
            inset 0 0 0 var(--sky-border-width-action-disabled)
              var(--sky-color-border-action-tertiary-disabled)
          );
        }
      }
    }
  }

  .sky-btn-link-inline {
    background-color: var(--sky-color-background-action-tertiary-base);
    border-radius: var(
      --sky-override-button-link-inline-border-radius,
      var(--sky-border-radius-s)
    );
    padding: var(--sky-space-inset-balanced-none);
    color: var(--sky-color-text-action);
    font-size: var(--sky-override-button-link-inline-font-size, inherit);
    vertical-align: var(--sky-override-button-link-inline-vertical-align, '');

    &:focus-visible:not(:active) {
      background-color: var(--sky-color-background-action-tertiary-focus);
      box-shadow:
        0 0 0 var(--sky-border-width-action-focus)
          var(--sky-color-border-action-tertiary-focus),
        var(--sky-elevation-focus);
    }

    &:active {
      background-color: var(--sky-color-background-action-tertiary-active);
    }

    &:hover {
      background-color: var(--sky-color-background-action-tertiary-hover);
    }

    &:hover,
    &:active {
      color: var(
        --sky-override-button-link-inline-color-hover-active,
        var(--sky-color-text-action)
      );
      text-decoration: underline;
    }

    &.sky-btn-disabled,
    &[disabled] {
      &,
      &:hover,
      &:focus-visible,
      &.sky-btn-focus,
      &:active,
      &.sky-btn-active {
        box-shadow: inset 0 0 0 0
          var(--sky-color-border-action-tertiary-disabled);

        &:is(:focus-visible, .sky-btn-focus) {
          box-shadow: var(
            --sky-override-button-link-inline-disabled-box-shadow,
            inset 0 0 0 0 var(--sky-color-border-action-tertiary-disabled)
          );
        }
      }
    }
  }

  .sky-btn-borderless-inline {
    color: var(--sky-color-text-deemphasized);
    padding: var(--sky-space-inset-balanced-none);
    font-size: var(--sky-override-button-link-inline-font-size, inherit);
    vertical-align: var(--sky-override-button-link-inline-vertical-align, '');

    &:focus-visible:not(:active) {
      box-shadow:
        0 0 0 var(--sky-border-width-action-focus)
          var(--sky-color-border-action-tertiary-focus),
        var(--sky-elevation-focus);
    }

    &.sky-btn-disabled,
    &[disabled] {
      &,
      &:hover,
      &:focus-visible,
      &.sky-btn-focus,
      &:active,
      &.sky-btn-active {
        box-shadow: inset 0 0 0 0
          var(--sky-color-border-action-tertiary-disabled);

        &:is(:focus-visible, .sky-btn-focus) {
          box-shadow: var(
            --sky-override-button-borderless-inline-disabled-box-shadow,
            inset 0 0 0 0 var(--sky-color-border-action-tertiary-disabled)
          );
        }
      }
    }
  }

  .sky-btn-sm {
    padding: $sky-padding-half $sky-padding;
    font-size: 12px;
    line-height: 1.5;
  }

  .sky-btn-tab {
    background-color: var(--sky-color-background-nav-base);
    border: none;
    border-radius: 0;
    border-top-left-radius: var(
      --sky-override-tab-button-radius,
      var(--sky-border-radius-s)
    );
    border-top-right-radius: var(
      --sky-override-tab-button-radius,
      var(--sky-border-radius-s)
    );
    color: var(--sky-color-text-deemphasized);
    font-size: var(--sky-font-size-body-m);
    font-weight: var(--sky-font-weight-body-m);
    line-height: var(
      --sky-override-tab-line-height,
      var(--sky-font-line_height-body-m)
    );
    padding: var(--sky-space-inset-pillarbox-2_3-top-m)
      var(--sky-space-inset-pillarbox-2_3-right-m)
      var(--sky-space-inset-pillarbox-2_3-bottom-m)
      var(--sky-space-inset-pillarbox-2_3-left-m);
    transition: box-shadow $sky-transition-time-short;

    &:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(
        .sky-dropdown-button-type-tab
      ):not(:focus-visible) {
      background-color: var(--sky-color-background-nav-hover);
      border-bottom: var(--sky-border-width-selected-s)
        var(--sky-border-style-accent)
        var(
          --sky-override-tab-hover-border-bottom-color,
          var(--sky-color-border-selected)
        );
      color: var(--sky-color-text-default);
      padding-bottom: calc(
        var(--sky-space-inset-pillarbox-2_3-bottom-m) - var(
            --sky-border-width-selected-s
          )
      );
    }

    &:focus-visible {
      background-color: var(--sky-color-background-nav-focus);
      color: var(--sky-color-text-default);
      outline: none;
    }

    &:focus-visible:not(:active) {
      color: var(--sky-color-text-default);
      outline: solid var(--sky-border-width-selected-m)
        var(--sky-color-border-selected);
      outline-offset: calc(var(--sky-border-width-selected-m) * -1);
      box-shadow: var(--sky-elevation-focus);
    }

    &:active {
      color: var(--sky-color-text-default);
      background-color: var(--sky-color-background-nav-active);
      border-bottom: var(--sky-border-width-selected-s)
        var(--sky-border-style-accent)
        var(
          --sky-override-tab-hover-border-bottom-color,
          var(--sky-color-border-selected)
        );
      padding-bottom: calc(
        var(--sky-space-inset-pillarbox-2_3-bottom-m) - var(
            --sky-override-tab-selected-border-bottom-size,
            var(--sky-border-width-selected-s)
          )
      );
    }

    &.sky-btn-tab-disabled {
      background-color: var(
        --sky-override-tab-disabled-background-color,
        var(--sky-color-background-nav-disabled)
      );
      color: var(--sky-color-text-deemphasized);
      font-style: var(--sky-font-style-deemphasized-style);
      font-weight: var(--sky-font-style-deemphasized-weight);
      font-size: var(
        --sky-override-tab-disabled-font-size,
        var(--sky-font-size-body-m)
      );

      .sky-btn-tab-close {
        font-size: var(--sky-font-size-body-m);
      }
    }
  }

  .sky-btn-tab-selected:not(.sky-btn-tab-disabled) {
    background-color: var(
      --sky-override-tab-selected-background-color,
      var(--sky-color-background-selected-soft)
    );
    color: var(--sky-color-text-default);
    box-shadow: none;

    &:not(:active) {
      border-bottom: var(
          --sky-override-tab-selected-border-bottom-size,
          var(--sky-border-width-selected-l)
        )
        var(--sky-border-style-accent) var(--sky-color-border-selected);
      padding-bottom: calc(
        var(--sky-space-inset-pillarbox-2_3-bottom-m) - var(
            --sky-override-tab-selected-border-bottom-size,
            var(--sky-border-width-selected-l)
          )
      );
    }

    &:hover:not(.sky-btn-tab-disabled) {
      background-color: var(
        --sky-override-tab-selected-background-color,
        var(--sky-color-background-selected-soft)
      );
      color: var(--sky-color-text-default);
    }

    .sky-btn-tab-close,
    .sky-tab-header-count {
      color: var(--sky-color-text-deemphasized);
    }

    .sky-btn-tab-close {
      background-color: transparent;
      border: none;
      cursor: pointer;
      margin-left: var(--sky-space-gap-text_action-xs);
    }
  }

  .sky-tab-header-count {
    color: var(--sky-color-text-deemphasized);
    margin-left: var(--sky-space-gap-label-m);
  }

  .sky-tab-dropdown-menu-item {
    .sky-btn-tab {
      border-radius: var(--sky-border-radius-s);
      &:hover:not(.sky-btn-tab-disabled) {
        border-bottom: none;
        outline: solid var(--sky-border-width-action-hover)
          var(--sky-color-border-action-secondary-hover);
        outline-offset: calc(var(--sky-border-width-action-hover) * -1);
      }

      &:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected) {
        background-color: transparent;
      }

      &:focus-visible:not(:active) {
        background-color: transparent;
        box-shadow: var(--sky-elevation-focus);
        outline: solid var(--sky-border-width-action-active)
          var(--sky-color-border-action-secondary-focus);
        outline-offset: calc(var(--sky-border-width-action-active) * -1);
      }

      &.sky-btn-tab-selected {
        background-color: var(
          --sky-override-selected-dropdown-background-color,
          var(--sky-color-background-selected-soft)
        );
        color: var(--sky-color-text-default);
        border-bottom: none;
        border-radius: 0 var(--sky-border-radius-s) var(--sky-border-radius-s) 0;
        border-left: var(
            --sky-override-selected-dropdown-item-border-width,
            var(--sky-border-width-selected-l)
          )
          var(--sky-border-style-accent) var(--sky-color-border-selected);
        padding-bottom: var(--sky-space-inset-pillarbox-2_3-bottom-m);
        padding-left: calc(
          var(--sky-space-inset-pillarbox-2_3-left-m) - var(
              --sky-override-selected-dropdown-item-border-width,
              var(--sky-border-width-selected-l)
            )
        );
      }
    }
  }
}
