@use '../common/variables';
@use '../utilities/text';

// —————————————————————————————————————————————————————————————————
// elements
// active
// direction
// dense
// hasBorder
// —————————————————————————————————————————————————————————————————

$spacing: 1rem;
$spacing-dense: .5rem;

// —————————————————————————————————————————————————————————————————
// elements
// —————————————————————————————————————————————————————————————————

.tabs {
  width: 100%;

  &_controls {
    display: flex;
    width: 100%;
    border-block-end: variables.$border;
  }

  &_panel {
    margin-block-start: $spacing;
  }
}

.tab {
  position: relative;
  cursor: pointer;
  padding: $spacing*.5 $spacing;
  border-start-start-radius: variables.$border-radius-md;
  border-start-end-radius: variables.$border-radius-md;
  text-transform: variables.$button-transform;
  font-weight: variables.$button-weight;
  font-size: variables.$button-sm-size;

  &:not(.tab-active):hover {
    text-decoration: underline;
    text-underline-offset: .15em;
  }
  
  &:after {
    content: '';
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: -1px;
    inset-inline-start: 0;
    height: 3px;
  }
}

// —————————————————————————————————————————————————————————————————
// active
// —————————————————————————————————————————————————————————————————

.tab-active {
  color: variables.$primary;

  &:after {
    background-color: variables.$primary;
  }
}

// —————————————————————————————————————————————————————————————————
// direction
// —————————————————————————————————————————————————————————————————

.tabs-landscape {
  display: flex;

  .tabs {

    &_controls {
      flex-direction: column;
      width: 10rem;
      border-block-end: 0;
      border-inline-end: variables.$border;
    }

    &_panel {
      margin-block-start: 0;
      margin-inline-start: $spacing;
    }
  }

  .tab {
    text-align: left;
    border-start-start-radius: variables.$border-radius-sm;
    border-start-end-radius: 0 !important;
    border-end-start-radius: variables.$border-radius-sm;
      
    &:after {
      inset-block-start: 0;
      inset-inline-end: -1px;
      inset-inline-start: auto;
      height: 100%;
      width: 3px;
    }
  }
}

// —————————————————————————————————————————————————————————————————
// dense
// —————————————————————————————————————————————————————————————————

.tabs-dense {
  
  .tabs_panel {
    margin-block-start: $spacing-dense;
  }  

  .tab {
    padding: $spacing-dense*.5 $spacing-dense;
    border-start-start-radius: variables.$border-radius-sm;
    border-start-end-radius: variables.$border-radius-sm;
  }
}

// —————————————————————————————————————————————————————————————————
// hasBorder
// —————————————————————————————————————————————————————————————————

.tabs-hasBorder {
  border: variables.$border;
  background: variables.$background-paper;
  border-radius: variables.$border-radius-md;
  
  .tabs_panel {
    margin-block-start: 0;
    margin-inline-start: 0;
    padding: $spacing;
  }
  
  &.tabs-dense {
    border-radius: variables.$border-radius-sm;
    
    .tabs_panel {
      padding: $spacing-dense;
    }
  }
}