@import '../variables/color';
@import '../variables/spacing';
@import '../variables/type';
@import '../variables/grid';
@import '../mixins/type';
@import '../mixins/breakpoints';


.alert-container {
  container-type: inline-size;
  display: block;

  &.alert-dismissed {
    display: none;
    visibility: hidden;
  }  

  .alert {
    position: relative;
    padding: 1.5rem;
    border-radius: 2px;
  
    @include container-breakpoint-down(sm) {
      padding: 1.5rem 1rem;
    }
  
    @each $type, $value in $main-component-type {
      &.alert-#{$type} {
        color: $value;
        border: 1px solid $value;
        background-color: map-get($main-component-backgrounds, $type);
        
        .icon-container {
          @if $type == 'warning' {
            color: $warning-link;
          } 
        }

        .dismiss {
          position: absolute;
          top:.5rem;
          right:.5rem;
          border:0;
          padding:0;
          font-size: 1.5rem;
          background-color: transparent;
          cursor: pointer;
          
          &:focus, &:hover {
            outline: 0;
            background-color: map-get($main-component-close-hover, $type);
            border-radius: 50%;
          }

          &:focus-visible {
            box-shadow: 0px 0px 0px 2px $value;
          }
        }        
      }
    }
  
    .alert-inner {
      display: flex;
      align-items:start;
    }
  
    .alert-content {
      width: 100%;
      display: flex;
      flex-flow: column;
      color: $body-copy;
  
      .headline {
        @include content-title;
        @include font-weight(700);
        margin-bottom: .5rem;
      }    
    
      .has-icon {
        padding-left: 1rem;
      }

      > div{
        p{
          &:last-of-type{
            margin-bottom: 0;
          }
        }
      }
      
    }
  
    .icon-container {
      background: transparent;
      font-size: 1.75rem;
  
      &.no-headline {
        margin-top: 0;
      }
    }
  }
}