@import '../mixins';

$icon-size: 44px;

.info-banner {
  @include elevation-1;
  background-color: $color-N0;
  padding: 0 12px;
  box-sizing: border-box;
  max-height: 0;
  display: grid;
  grid-template-columns: 48px 1fr 16px;
  column-gap: 8px;
  border-radius: 8px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 98px 98px;

  &.with-transition {
    transition: max-height 0.3s ease-out, padding 0.3s ease-in,
      box-shadow 0.3s ease;
  }

  &.open {
    padding: 12px;
    max-height: 600px;
    transition: max-height 0.4s ease-in, padding 0.4s ease-out,
      box-shadow 0.3s ease;
  }

  &.general {
    background-color: $color-N0;
    background-image: url('./assets/general-supergraphic.png');
  }

  &.warning {
    background-color: $color-Y100;
    background-image: url('./assets/warning-supergraphic.png');
  }

  &.urgent {
    background-color: $color-R100;
    background-image: url('./assets/urgent-supergraphic.png');
  }

  .banner-icon {
    width: $icon-size;
    height: $icon-size;

    img {
      width: 100%;
      height: auto;
    }
  }

  .banner-body {
    p {
      margin: 0;

      + p {
        margin-top: 2px;
      }
    }

    .truncate {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .banner-action {
      @include font-size-b3;
      margin-top: 2px;
      height: 16px;
      text-align: left;
    }
  }

  .tix-icon-cancel {
    cursor: pointer;
  }
}