@import "settings.colors";
@import "settings.fonts";
@import "mixins/bundle";

.c-website-alert {
  @include display-grid;
  @include grid-template-columns(auto auto);
  background-color: $color-stone-200;
  border: 1px solid $color-grey-300;
  border-radius: rem(2);
  padding: rem(20);
  animation: fadein 1.35s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to   {
    opacity: 1;
  }
}

.c-website-alert--system {
  background-color: $color-utility-yellow-500;
}

.c-website-alert--breaking {
  background-color: $color-red-600;
  a {
    color: $color-white;
    &:hover {
      color: $color-grey-300;
    }
    &:active {
      color: $color-grey-900;
    }
  }
}

.c-website-alert__content {
  @include grid-column(1, 2);
  margin-right: rem(10);
  @include font-gm-sans;
  font-size: rem(15);
  letter-spacing: rem(0.5);
  line-height: line-height(15, 17);
  color: $color-grey-900;
  p {
    margin: 0;
  }
  p + p {
    margin-top: rem(10);
  }
  a {
    text-decoration: underline;
    color: $color-grey-900;
    &:hover {
      color: $color-grey-660;
    }
    &:active {
      color: $color-grey-500;
    }
  }
  .c-website-alert--breaking & {
    @include font-pratt-bold;
    font-weight: normal;
    font-style: normal;
    color: $color-white;
    font-size: rem(17);
    line-height: line-height(17, 20);
    a {
      color: $color-white;
      &:hover {
        color: $color-grey-300;
      }
      &:active {
        color: $color-grey-900;
      }
    }
  }
}

.c-website-alert__dismiss-btn {
  @include grid-column(2, 3);
  @include grid-justify-self(right);
  position: relative;
  width: rem(40);
  height: rem(40);
  background: transparent;
  border: none;
  @include tablet-up() {
    height: auto;
  }
  svg {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    color: $color-grey-900;
    fill: $color-grey-900;
    width: rem(15);
    height: rem(15);
    margin: 0;
    padding: 0;
  }
  &:hover {
    cursor: pointer;
    svg {
      color: $color-grey-660;
      fill: $color-grey-660;
    }
  }
  &:active svg {
    color: $color-grey-500;
    fill: $color-grey-500;
  }
  .c-website-alert--breaking & {
    svg {
      color: $color-white;
      fill: $color-white;
    }
    &:hover svg {
      color: $color-grey-300;
      fill: $color-grey-300;
    }
    &:active svg {
      color: $color-grey-500;
      fill: $color-grey-500;
    }
  }
}
