@import 'config';
@import '../variables';

.#{$framework-prefix}tab {
  --tab-header-font-size: #{$tab-header-font-size};
  --tab-label-color: #{$tab-label-color};
  flex-wrap: wrap;
  display: flex;
  --gap: 42px;
  $this: &;
  & > input[type="radio"] {
    position: absolute;
    left: -200vw;
    z-index: -1;
  }
  &-header {
    font-size: var(--tab-header-font-size, 34px);
    color: var(--main-black-color);
    padding-bottom: var(--gap);
    flex-basis: 100%;
    order: 1;
  }
  &-content {
    flex-basis: 100%;
    display: none;
    order: 3;
  }
  input[type="radio"]:checked {
    & + label + #{$this}-content {
      display: block;
    }
    & + label {
      color: var(--green);
    }
  }

  label {
    transition: color var(--transition-time);
    font-size: var(--tab-font-size, 24px);
    color: var(--tab-label-color);
    padding-bottom: var(--gap);
    padding-right: var(--gap);
    white-space: nowrap;
    cursor: pointer;
    order: 2;
    &:hover {
      color: var(--green);
    }
    &:focus {
      outline: none;
    }
  }
  &-inverted {
    & > #{$this}-header {
      order: 2;
    }
    & > label {
      order: 1;
    }
  }
}