@use './shared' as *;
@use './design' as *;

.#{$namespace}-tabs {
  @include basis {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  @include inherit-color;

  &__header {
    display: flex;
    flex-shrink: 0;
    min-width: 0;
    min-height: 0;

    .#{$namespace}-tab-nav {
      width: 100%;
      height: 100%;
    }
  }

  &__main {
    position: relative;
    display: flex;
    flex: auto;
    min-width: 0;
    min-height: 0;
    transition: value('transition-transform');
  }

  $header: #{&}__header;
  $main: #{&}__main;

  &--top {
    #{$main} {
      padding-top: 10px;
    }
  }

  &--right {
    flex-direction: row-reverse;

    #{$main} {
      padding-inline-end: 10px;
    }
  }

  &--bottom {
    flex-direction: column-reverse;

    #{$main} {
      padding-bottom: 10px;
    }
  }

  &--left {
    flex-direction: row;

    #{$main} {
      padding-inline-start: 10px;
    }
  }

  &__panel {
    display: none;
    flex-shrink: 0;
    width: 100%;

    &--active {
      display: block;
    }
  }
}