@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;
@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;

@include compatMixins.sky-default-overrides('.sky-dropdown') {
  --sky-override-caret-margin-left: #{$sky-margin};
  --sky-override-context-menu-border-radius: 50%;
  --sky-override-context-menu-font-size: 15px;
  --sky-override-context-menu-line-height: 1.428571429;
  --sky-override-context-menu-padding: 3px 8px;
}

@include compatMixins.sky-default-overrides('.sky-dropdown-button-type-tab') {
  --sky-override-tab-border-bottom: none;
  --sky-override-tab-button-radius: 4px;
  --sky-override-tab-dropdown-color: var(--sky-text-color-on-dark);
  --sky-override-tab-font-size: 15px;
  --sky-override-tab-font-weight: 600;
  --sky-override-tab-line-height: 1.8;
  --sky-override-tab-padding: 8px 16px;
  --sky-override-tab-selected-background-color: var(
    --sky-background-color-primary-dark
  );
}

@include compatMixins.sky-modern-overrides('.sky-dropdown') {
  --sky-override-context-menu-font-size: var(--sky-font-size-body-m);
  --sky-override-context-menu-line-height: calc(20 / 14);
  --sky-override-context-menu-padding: var(--modern-size-3) var(--modern-size-8);
}

@include compatMixins.sky-modern-overrides('.sky-dropdown-button-type-tab') {
  --sky-override-tab-button-radius: 0;
  --sky-override-tab-line-height: 1.8;
  --sky-override-tab-selected-background-color: var(--modern-color-transparent);
  --sky-override-tab-selected-border-bottom-size: var(--modern-size-3);
}

.sky-dropdown {
  .sky-dropdown-button-type-tab {
    background-color: var(
      --sky-override-tab-selected-background-color,
      var(--sky-color-background-selected-soft)
    );
    border: none;
    box-shadow: none;
    border-radius: var(
        --sky-override-tab-button-radius,
        var(--sky-border-radius-s)
      )
      var(--sky-override-tab-button-radius, var(--sky-border-radius-s)) 0 0;
    color: var(
      --sky-override-tab-dropdown-color,
      var(--sky-color-text-default)
    );
    border-bottom: var(
      --sky-override-tab-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)
    );
    cursor: pointer;
    display: inline-block;
    font-size: var(--sky-override-tab-font-size, var(--sky-font-size-body-m));
    font-weight: var(
      --sky-override-tab-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-override-tab-padding,
      var(--sky-space-inset-pillarbox-2_3-top-m)
        var(--sky-space-inset-pillarbox-2_3-right-m)
        calc(
          var(--sky-space-inset-pillarbox-2_3-bottom-m) - var(
              --sky-override-tab-selected-border-bottom-size,
              var(--sky-border-width-selected-l)
            )
        )
        var(--sky-space-inset-pillarbox-2_3-left-m)
    );
    max-width: 100%;
    text-align: left;
  }
}

.sky-dropdown-button-type-context-menu {
  border-radius: var(
    --sky-override-context-menu-border-radius,
    var(--sky-border-radius-s)
  );
  padding: var(
    --sky-override-context-menu-padding,
    var(--sky-space-inset-balanced-xs)
  );
  font-size: var(
    --sky-override-context-menu-font-size,
    var(--sky-font-size-body-l)
  );
  line-height: var(--sky-override-context-menu-line-height, 1);
}

:host-context(.sky-toolbar-container) {
  .sky-dropdown-button.sky-btn-link {
    color: $sky-text-color-default;
  }
}

.sky-dropdown-caret {
  margin-left: var(
    --sky-override-caret-margin-left,
    var(--sky-space-gap-icon-m)
  );
}

.sky-dropdown-button-container {
  display: flex;
}

.sky-dropdown-button-content-container {
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sky-dropdown-button-icon-container {
  flex-grow: 1;
}

.sky-dropdown-menu-container {
  position: fixed;
}

.hidden {
  visibility: hidden;
}

@include mixins.sky-theme-modern {
  .sky-dropdown-button-type-tab {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible:not(:active) {
      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);
    }
  }

  .sky-dropdown-button-type-context-menu {
    background-color: var(--sky-color-background-action-tertiary-base);

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