@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-tabset') {
  --sky-override-tabset-border-bottom: #{2px solid
    $sky-background-color-primary-dark};
  --sky-override-tabset-button-color: #{$sky-text-color-action-primary};
  --sky-override-tabset-button-group-padding-left: #{$sky-padding};
  --sky-override-tabset-button-margin-right: 5px;
  --sky-override-tabset-modal-margin: #{0 (-$sky-space-lg) $sky-space-xl};
  --sky-override-tabset-modal-padding-left: #{$sky-space-lg};
  --sky-override-tabset-modal-padding-none: 0;
  --sky-override-tabset-overflow: hidden;
  --sky-override-tabset-padding: 0 0 0
    var(--sky-layout-host-tab-content-spacing, #{$sky-padding-plus-half});
  --sky-override-tabset-wizard-border-bottom: none;
  --sky-override-tabset-wizard-modal-margin: #{0 0 $sky-space-xl};
}

@include compatMixins.sky-modern-v2('sky-tabset', false) {
  // The tabset buttons will be addressed in phase 2;
  // this explicit height setting allows the rest of the v2 tab styling to appear correctly for now
  .sky-tabset-btn-new,
  .sky-tabset-btn-open {
    height: 36px;
  }
}

sky-tabset {
  &.sky-tabset-layout-fit {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;

    .sky-tabset {
      flex-grow: 0;
    }
  }
}

.sky-tabset {
  --sky-tabset-margin: 0;

  align-items: center;
  border-bottom: var(
    --sky-override-tabset-border-bottom,
    var(--sky-border-width-divider) var(--sky-border-style-divider)
      var(--sky-color-border-divider)
  );
  display: flex;
  list-style-type: none;
  margin: var(--sky-tabset-margin);
  padding: var(
    --sky-override-tabset-padding,
    0 0 0
      var(--sky-layout-host-tab-content-spacing, var(--sky-space-inset-tabs-m))
  );
  white-space: nowrap;

  flex-grow: var(--sky-layout-host-content-flex-grow, 0);
  overflow: var(
    --sky-layout-host-content-overflow,
    var(--sky-override-tabset-overflow, visible)
  );
  position: var(--sky-layout-host-content-position, static);

  &.sky-tabset-style-wizard {
    border-bottom: var(
      --sky-override-tabset-wizard-border-bottom-style,
      var(--sky-border-width-divider) var(--sky-border-style-divider)
        var(--sky-color-border-divider)
    );
  }
}

.sky-modal-content {
  .sky-tabset-style-tabs {
    --sky-tabset-margin: var(
      --sky-override-tabset-modal-margin,
      calc(var(--sky-space-inset-floated-top-m) * -1)
        calc(var(--sky-space-inset-floated-right-m) * -1)
        var(--sky-space-inset-floated-bottom-m)
        calc(var(--sky-space-inset-floated-left-m) * -1)
    );

    padding-left: var(
      --sky-override-tabset-modal-padding-left,
      var(--sky-space-inset-floated-left-m)
    );
    padding-right: var(
      --sky-override-tabset-modal-padding-none,
      var(--sky-space-inset-floated-right-m)
    );
  }

  .sky-tabset-style-wizard {
    --sky-tabset-margin: var(
      --sky-override-tabset-wizard-modal-margin,
      calc(var(--sky-space-inset-floated-top-m) * -1)
        calc(var(--sky-space-inset-floated-right-m) * -1)
        var(--sky-space-inset-floated-bottom-m)
        calc(var(--sky-space-inset-floated-left-m) * -1)
    );

    padding-left: var(
      --sky-override-tabset-modal-padding-none,
      var(--sky-space-inset-floated-left-m)
    );
    padding-right: var(
      --sky-override-tabset-modal-padding-none,
      var(--sky-space-inset-floated-right-m)
    );
  }
}

.sky-tabset-btns {
  order: 1;
  padding-left: var(
    --sky-override-tabset-button-group-padding-left,
    var(--sky-space-gap-action_group-m)
  );

  .sky-tabset-btn-new,
  .sky-tabset-btn-open {
    margin-right: var(
      --sky-override-tabset-button-margin-right,
      var(--sky-space-gap-action_group-m)
    );
  }
}

.sky-tabset-dropdown {
  order: 0;
  max-width: 100%;
}

.sky-tabset.sky-tabset-mode-dropdown {
  overflow: hidden;
}

.sky-tabset-mode-dropdown {
  .sky-tabset-tabs {
    visibility: hidden;
    order: 2;
  }
}

.sky-tab-dropdown-menu-item {
  sky-tab-button {
    display: flex;
    min-width: 300px;
  }

  .sky-dropdown-item {
    margin: 0;

    .sky-btn-tab-wrapper {
      width: 100%;
      margin-right: 0;
    }
  }

  .sky-btn-tab {
    margin: 0;
    border-radius: 0;
    width: 100%;
    display: flex;

    > .sky-tab-heading {
      flex: 1 1 auto;
    }

    > .sky-btn-tab-close {
      flex: 0 1 auto;
    }
  }
}

.sky-tabset-tabs {
  order: 0;
  white-space: nowrap;
}

.sky-tabset-btn-new,
.sky-tabset-btn-open {
  color: var(--sky-override-tabset-button-color, --sky-color-text-default);
}
