@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;

@include mixins.sky-host-responsive-container-xs-min() {
  .sky-vertical-tabset {
    display: block;
    height: auto;
  }

  .sky-vertical-tabset-group-container {
    border-right: none;
  }
}

@include mixins.sky-host-responsive-container-sm-min() {
  .sky-vertical-tabset {
    display: flex;
    height: 100%;
  }

  .sky-vertical-tabset-group-container {
    @include mixins.sky-border(dark, right);
  }
}

.sky-vertical-tabset-hidden {
  display: none;
}

.sky-vertical-tabset-content {
  margin: $sky-margin 0 0 $sky-margin;
  flex-basis: 75%;
  overflow-y: auto;
}

.sky-vertical-tabset-content-hidden {
  display: none;
}

.sky-vertical-tabset-show-tabs-btn {
  margin-top: $sky-margin;
}

.sky-vertical-tabset-group-container {
  flex-basis: 25%;
  overflow-y: auto;
}

:host-context(sky-modal-content) > :host .sky-vertical-tabset {
  margin: -15px;
}

@include mixins.sky-theme-modern {
  .sky-vertical-tabset-content {
    margin: $sky-theme-modern-space-md;
  }
  @include mixins.sky-host-responsive-container-sm-min() {
    .sky-vertical-tabset-content {
      margin: $sky-theme-modern-space-lg $sky-theme-modern-space-xl;
    }
    .sky-vertical-tabset-group-container {
      border-right: 1px solid $sky-theme-modern-border-color-neutral-medium;
    }
  }
}
