/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use './core' as *;
@use '../button';
@use '../icon-button';
@use '../core/styles/theme';

//
// Host
//

:host {
  @include host;
}

:host([hidden]) {
  display: none;
}

//
// Base
//

.forge-banner {
  @include tokens;
}

.forge-banner {
  @include base;

  .inner {
    @include inner;
  }

  .container {
    @include container;
  }

  .dismiss-button-container {
    @include dismiss-button-container;
  }

  ::slotted(forge-button[slot=dismiss-button]) {
    @include button.provide-theme((
      primary-color: #{token(color)}
    ));
  }
  
  ::slotted(forge-icon-button[slot=dismiss-button]),
  forge-icon-button[part=dismiss-button] {
    color: #{token(icon-color)};
    
    @include icon-button.provide-theme((
      focus-indicator-color: #{token(color)}
    ));
  }
}

//
// Slotted - button
//

::slotted(forge-button[slot=button]) {
  @include button.provide-theme((
    primary-color: #{token(color)}
  ));
}

//
// Slotted -icon
//

::slotted([slot=icon]) {
  color: #{token(icon-color)};
}

//
// Dismissed
//

:host([dismissed]) {
  .forge-banner {
    @include dismissed;
  }
}

//
// Theme
//

@each $theme in [primary secondary tertiary success error warning] {
  :host([theme=#{$theme}]) {
    .forge-banner {
      @include override(background, theme.variable(#{$theme}-container), value);
      @include override(icon-color, theme.variable(on-#{$theme}-container), value);
    }
  }
}

// Backwards compatibility with the new error theme
:host([theme=danger]) {
  .forge-banner {
    @include override(background, theme.variable(error-container), value);
    @include override(icon-color, theme.variable(on-error-container), value);
  }
}

// Use surface theme for info-secondary
:host([theme=info-secondary]) {
  .forge-banner {
    @include override(background, theme.variable(surface-container), value);
    @include override(icon-color, theme.variable(on-surface-container), value);
  }
}

//
// Responsive
//

@container (max-width: 600px) {
  .forge-banner.has-button {
    .container {
      display: grid;
      grid-template-rows: [content] 1fr [button] auto;
      grid-template-columns: [content] 1fr;
      place-items: normal;
    }

    &.has-icon {
      .container {
        grid-template-columns: [icon] auto [content] 1fr;
      }
    }

    .inner {
      place-items: normal;
    }

    .button-container {
      grid-row: button;
      grid-column: content;
    }

    .dismiss-button-container {
      align-items: flex-start;
    }
  }
}
