@import '~@kaizen/design-tokens/sass/border';
@import '~@kaizen/design-tokens/sass/color';
@import '~@kaizen/design-tokens/sass/spacing';
@import '~@kaizen/design-tokens/sass/layout';
@import '../../../styles/utils/animation';
@import '../GenericModal/GenericModal.module';

@layer kz-components {
  .modal {
    @extend %genericModal;

    min-width: 300px;
    max-width: 600px;

    .spotIcon {
      color: var(--spot-icon-color);
    }
  }

  .header {
    display: grid;
    grid-template-columns: 0.2fr 2fr;
    align-items: center;
    color: $color-white;
    text-align: start;
    border-radius: $border-solid-border-radius $border-solid-border-radius 0 0;

    &.padded {
      padding: $spacing-md $spacing-lg;

      @media (max-width: $layout-breakpoints-medium) {
        padding: $spacing-md;
      }
    }

    // override Murmur global styles :(
    h1 {
      color: var(--color-purple-800);
    }
  }

  .iconContainer {
    position: relative;
    align-self: flex-start;

    @media (min-width: $layout-breakpoints-medium) {
      align-self: center;
    }

    .spotIcon {
      --icon-size: 30;

      width: 30px;
      height: 30px;

      @media (max-width: $layout-breakpoints-medium) {
        margin-inline-end: 0.9375rem;
        position: relative;
        inset-block-start: 0.125rem;
      }
    }
  }

  .prominent {
    display: grid;
    grid-template-columns: 1.1fr 2fr;
    align-items: center;

    @media (max-width: $layout-breakpoints-medium) {
      grid-template-columns: 1fr;
      display: flex;
      flex-direction: column;
      place-content: flex-start center;
      align-items: flex-start;
    }

    .iconContainer {
      position: absolute;
      inset-block-start: 8%;

      @media (max-width: $layout-breakpoints-medium) {
        position: relative;
        inset-block-start: 0;
        margin-block-end: $spacing-sm;
      }
    }

    .spotIcon {
      width: 155px;
      height: 155px;
      margin: 0 auto;
      color: $color-purple-800;

      @media (max-width: $layout-breakpoints-medium) {
        width: 86px;
        height: 86px;
      }
    }
  }

  .padded {
    padding: $spacing-md $spacing-lg $spacing-md $spacing-lg;

    @media (max-width: $layout-breakpoints-medium) {
      padding: $spacing-md;
    }
  }

  // --------------------------------
  // variant styles
  // --------------------------------
  .success {
    background-color: var(--color-green-100);

    --spot-icon-color: var(--color-green-500);
  }

  .informative {
    background-color: var(--color-blue-100);

    --spot-icon-color: var(--color-blue-500);
  }

  .warning {
    background-color: var(--color-red-100);

    --spot-icon-color: var(--color-red-500);
  }

  .cautionary {
    background-color: var(--color-yellow-100);

    --spot-icon-color: var(--color-yellow-700);
  }

  // --------------------------------
}