/* 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-segmented-control {
    @include bk.component-base(bk-segmented-control);
    
    --bk-segmented-control-background-color: #{bk.$theme-segmented-control-background-default};
    --bk-segmented-control-border-color: #{bk.$theme-segmented-control-border-unselected};
    --bk-segmented-control-text-color: #{bk.$theme-segmented-control-text-unselected};
    
    //overflow: hidden; // Note: cannot hide overflow, would truncate focus outlines
    inline-size: fit-content; // Do not stretch in a block context
    align-self: center; // Do not stretch along cross axis in flex context
    flex: none; // Do not shrink/grow in a flex context
    
    border: bk.rem-from-px(1) solid var(--bk-segmented-control-border-color);
    border-radius: bk.$radius-1;
    background: var(--bk-segmented-control-border-color);
    
    display: flex;
    flex-direction: row;
    gap: bk.rem-from-px(1);
    
    // Set this to allow wrapping:
    //flex-wrap: wrap;
    // Note: may want to implement https://heydonworks.com/article/the-flexbox-holy-albatross-reincarnated
    
    .bk-segmented-control__button {
      // For the inner radius, subtract the border width
      --inner-radius: #{calc(bk.$radius-1 - bk.rem-from-px(1))};
      
      flex-grow: 1; // Fill full width in case `flex-wrap` is enabled
      
      user-select: none;
      
      padding: bk.$spacing-1 bk.$spacing-3;
      border: none;
      background-color: var(--bk-segmented-control-background-color);
      
      @include bk.text-one-line($include-padding: false);
      color: var(--bk-segmented-control-text-color);
      @include bk.font($family: bk.$font-family-body, $weight: bk.$font-weight-semibold);
      text-transform: uppercase;
      
      &:first-of-type {
        border-start-start-radius: var(--inner-radius);
        border-end-start-radius: var(--inner-radius);
      }
      &:last-of-type {
        border-start-end-radius: var(--inner-radius);
        border-end-end-radius: var(--inner-radius);
      }
      
      display: flex;
      flex-direction: row;
      column-gap: bk.$spacing-1;
      justify-items: center;
      
      > :global(.icon) {
        padding: 0.1lh;
        font-size: 1em;
      }
      
      // Selected button
      &[aria-checked="true"] {
        --bk-segmented-control-background-color: #{bk.$theme-segmented-control-background-selected};
        --bk-segmented-control-text-color: #{bk.$theme-segmented-control-text-default};
      }
      
      // State: hover (only for non-selected buttons)
      &:is(:hover, :global(.pseudo-hover)):not([aria-checked="true"]) {
        --bk-segmented-control-background-color: #{bk.$theme-segmented-control-background-hover};
      }
      
      @include bk.focus-outset;
      &:is(:focus-visible, :global(.pseudo-focus-visible)) {
        isolation: isolate; // Have the focused toggle render over the other toggles so that the focus is fully shown
        border-radius: bk.$radius-1;
      }
      
      // State: active
      &:not(:disabled):active {
        filter: brightness(90%);
      }
      @media (prefers-reduced-motion: no-preference) {
        transition: filter 100ms ease-out;
      }
      
      // State: disabled (single button)
      &.bk-segmented-control__button:disabled {
        --bk-segmented-control-background-color: #{bk.$theme-segmented-control-background-disabled-2};
        --bk-segmented-control-text-color: #{bk.$theme-segmented-control-text-unselected-2};
        
        cursor: not-allowed;
        
        &[aria-checked="true"] {
          --bk-segmented-control-background-color: #{bk.$theme-segmented-control-background-disabled};
        }
      }
    }
    
    // State: disabled (entire control)
    &.bk-segmented-control--disabled {
      --bk-segmented-control-background-color: #{bk.$theme-segmented-control-background-disabled-2};
      --bk-segmented-control-border-color: #{bk.$theme-segmented-control-border-disabled};
      --bk-segmented-control-text-color: #{bk.$theme-segmented-control-text-unselected-2};
      
      cursor: not-allowed;
    }
    
    &.bk-segmented-control--small {
      .bk-segmented-control__button {
        font-size: bk.$font-size-xs;
      }
    }
  }
}
