/* Copyright (c) Fortanix, Inc.
|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@use '../../../styling/defs.scss' as bk;

@layer baklava.components {
  .bk-tabs {
    @include bk.component-base(bk-tabs);
    
    .bk-tabs__switcher {
      display: flex;
      list-style: none;
      border-block-end: 1px solid #{bk.$theme-tab-rule-default};
      
      .bk-tabs__switcher__tab {
        cursor: pointer;
        position: relative;
        user-select: none;
        
        padding: bk.$spacing-3 bk.$spacing-8;
        
        display: grid;
        grid-template-areas: stack;
        > * {
          grid-area: stack;
        }
        
        color: #{bk.$theme-tab-text-default};
        @include bk.font(bk.$font-family-body, bk.$font-weight-semibold, bk.$font-size-m);
        text-transform: uppercase;
        white-space: nowrap;
        
        // The active tab underline (zero height by default)
        &::after {
          content: "";
          position: absolute;
          inline-size: 100%;
          inset-inline-start: 0;
          inset-block-end: 0;
          block-size: 0;
          transition: .3s;
        }
        
        > .bk-tabs__switcher__tab__hover-placeholder {
          visibility: hidden;
          font-weight: bk.$font-weight-bold;
        }
        
        &:is(:hover, :global(.pseudo-hover)) {
          font-weight: bk.$font-weight-bold;
          
          &::after {
            background-color: #{bk.$theme-tab-tabs-hover};
            block-size: 5px;
          }
        }
        
        &:is(:focus-visible, :global(.pseudo-focus-visible)) {
          font-weight: bk.$font-weight-bold;
          
          &::after {
            background-color: #{bk.$theme-tab-tabs-selected};
            block-size: 5px;
          }
        }
        
        &[aria-selected="true"] {
          font-weight: bk.$font-weight-bold;
          
          &::after {
            cursor: default;
            background-color: #{bk.$theme-tab-tabs-selected};
            block-size: 5px;
          }
        }
      }
    }
    
    .bk-tabs__tab-content {
      padding-block-start: bk.$spacing-7;
    }
  }
}
