/* 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-solution-selector {
    @include bk.component-base(bk-solution-selector);
    
    user-select: none;
    
    // Allow the element to shrink down to just the icon
    overflow: hidden;
    flex-shrink: 4; // Shrink relatively fast (since there is no important information besides the icon)
    min-inline-size: 3rem;
    
    display: flex;
    gap: bk.$spacing-2;
    align-items: center;
    
    .bk-solution-selector__icon {
      --bk-icon-accent-color: #{bk.$theme-header-icon-background-default};
      
      // By default this scales based on the SVG icon size, but in this case we would like to set a fixed width
      // and make the SVG icon size dependent on the width + padding. Reason is because we want the size to be
      // consistent with the other icons in the header, but the icons themselves may have different sizes.
      box-sizing: border-box;
      aspect-ratio: 1;
      inline-size: bk.$spacing-9;
      block-size: auto;
      padding: 0.8em;
    }
    .bk-solution-selector__caret {
      // Tweak the caret positioning slightly
      margin-inline-start: -0.2rem;
      margin-block-end: -0.2rem;
    }
  }
}
