/* 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-banner {
    @include bk.component-base(bk-banner);
    
    --bk-banner-color-foreground: #{bk.$theme-banner-informational-border-default};
    --bk-banner-color-background: #{bk.$theme-banner-informational-background-default};
    --bk-banner-border-radius: #{bk.$radius-2};
    --bk-banner-indent: calc(#{bk.$spacing-3} + 1.2rem + #{bk.$spacing-2}); // Spacing + icon width + spacing
    
    overflow: hidden; // Banners shouldn't scroll (max height on a banner doesn't really make sense)
    
    padding-block: calc(bk.$spacing-2 * 1.25);
    padding-inline: bk.$spacing-3;
    padding-inline-start: var(--bk-banner-indent); // Indent all of the content (e.g. for when the message wraps)
    
    border: bk.$size-1 var(--bk-banner-color-foreground) solid;
    border-inline-start-width: var(--bk-banner-border-radius); // Thicker border extending as far as the radius
    border-radius: var(--bk-banner-border-radius);
    background: var(--bk-banner-color-background);
    
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: bk.$spacing-2;
    
    @include bk.font(bk.$font-family-body, bk.$font-weight-regular, bk.$font-size-m);
    line-height: bk.$line-height-m;
    color: bk.$theme-banner-text-default;
    
    .bk-banner__header {
      @include bk.flex-row;
      align-items: flex-start;
      gap: bk.$spacing-4;
      
      .bk-banner__header__text {
        margin-inline-end: auto; // Space between text and actions
        
        @include bk.flex-row;
        flex-wrap: wrap;
        gap: bk.$spacing-1;
        
        .bk-banner__title {
          $icon-size: 1.3em;
          margin-inline-start: calc(-1 * (bk.$spacing-2 + $icon-size));
          
          @include bk.flex-row;
          gap: bk.$spacing-2;
          align-items: center;
          
          font-weight: bk.$font-weight-semibold;
          
          .bk-banner__title__icon {
            color: var(--bk-banner-color-foreground);
          }
          
          .bk-banner__title__text {
            @include bk.text-one-line;
          }
        }
        
        .bk-banner__message--compact {
          --keep: ;
        }
      }
      .bk-banner__actions {
        flex-shrink: 0;
        
        @include bk.flex-row;
        align-items: center;
        gap: bk.$spacing-3 calc(bk.$spacing-6 / 2);
        
        > button {
          // Keep each item to a max of 1lh, so that in the case of all items being on one line, all the items
          // are properly aligned with the title (which implicitly has height `1lh`).
          block-size: 1lh;
        }
        
        .bk-banner__action {
          flex: none;
          
          color: bk.$theme-banner-text-link-default;
          
          &:hover {
            color: bk.$theme-banner-text-link-hover;
          }
          
          &.bk-banner__action--button { font-weight: bk.$font-weight-semibold; }
          &.bk-banner__action--icon { --keep: ; }
        }
        
        .bk-banner__action-close {
          flex: none;
          margin-inline-start: calc(bk.$spacing-6 / 2); // Total gap should be `bk.$spacing-6`
          
          display: flex;
          color: bk.$theme-banner-icon-default;
        }
      }
    }
    
    .bk-banner__message {
      --keep: ;
    }
    
    // Variants
    &.bk-banner--info {
      --bk-banner-color-foreground: #{bk.$theme-banner-informational-border-default};
      --bk-banner-color-background: #{bk.$theme-banner-informational-background-default};
    }
    &.bk-banner--warning {
      --bk-banner-color-foreground: #{bk.$theme-banner-warning-border-default};
      --bk-banner-color-background: #{bk.$theme-banner-warning-background-default};
    }
    &.bk-banner--error {
      --bk-banner-color-foreground: #{bk.$theme-banner-alert-border-default};
      --bk-banner-color-background: #{bk.$theme-banner-alert-background-default};
    }
    &.bk-banner--success {
      --bk-banner-color-foreground: #{bk.$theme-banner-success-border-default};
      --bk-banner-color-background: #{bk.$theme-banner-success-background-default};
    }
  }
  
  .bk-banner + .bk-banner:not(.bk-banner--trimmed) {
    margin-block-start: bk.$spacing-2;
  }
}
