@import "../../styles/variables.scss";
@import "../common/typography/text.mixins.scss";

:host {
  display: grid;
  grid-template-columns: 5rem 1fr 15px;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
  position: relative;
  background: $navy;
  color: $white;
  padding: $spacing-md;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);

  &.show {
    display: grid !important;
  }

  &.launched {
    display: none;
    position: fixed;
    z-index: 9999;
  }

  .toast-icon {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
  }

  .close-icon {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    align-self: flex-start;
    cursor: pointer;
    height: 100%;
  }

  .toast-icon i,
  .close-icon i {
    display: flex;
    position: relative;
    font-size: 1.2rem;
    line-height: 1.2;
  }

  &.toast-container {
    .toast-content {
      .link-generated {
        width: 100%;
        position: relative;
        input {
          background: transparent !important;
          border: none;
          border-bottom: 1px solid lighten($dark, 45%);
          border-radius: 0;
          outline: none;
          height: 2rem;
          width: 95%;
          margin: 0;
          padding: 0;
          box-shadow: none;
          box-sizing: content-box;
          transition: all 300ms;
          color: $white;
          text-overflow: ellipsis;
          &:focus {
            background-color: $positive;
          }
          &:hover {
            border-bottom: 1px solid lighten($dark, 15%);
          }
        }
      }
    }
  }

  p {
    white-space: pre-line;
  }

  h5 {
    display: block;
    font-size: 1.4rem;
    color: inherit;
  }

  .toast-content > p {
    margin: 0;
    max-width: inherit;
    font-size: 1.3rem;
    &.message-only {
      padding: 0;
      font-size: 1.4rem;
    }
  }

  &.text {
    background: $dark;
  }
  &.neutral {
    background: $neutral;
  }
  &.background {
    background: $off-white;
    .toast-content > h5 {
      color: $dark !important;
    }
    i,
    p {
      color: $dark;
    }
  }

  &.fixedBottom,
  &.fixedTop {
    left: 0;
    right: 0;
  }

  &.fixedBottom {
    bottom: -100%;
    padding-bottom: 20px;
    @include ease("all", "swift-ease-in-out");
    &.animate {
      padding-bottom: 10px;
      bottom: 0;
    }
    @for $i from 2 through 100 {
      &:nth-last-of-type(#{$i}) {
        bottom: (25px * ($i - 1));
        z-index: 9999 - $i;
        filter: brightness(1- (calc(1 / 7)));
      }
    }
  }

  &.fixedTop {
    top: -100%;
    padding-top: 20px;
    @include ease("all", "swift-ease-in-out");
    &.animate {
        padding-top: 10px;
        top: 0;
    }
    @for $i from 2 through 100 {
      &:nth-last-of-type(#{$i}) {
        top: (25px * ($i - 1));
        z-index: 9999 - $i;
        filter: brightness(1- (calc(1 / 7)));
      }
    }
  }

  &.embedded.fixedBottom,
  &.embedded.fixedTop {
    top: auto;
    left: auto;
    right: auto;
    width: inherit;
    margin: -1rem -3rem;
    &.animate {
      top: auto;
    }
  }

  &[class*="growl"] {
    border-radius: 3px;
    max-width: 350px;
  }

  &.growlBottomLeft,
  &.growlTopLeft {
    left: -100%;
    right: auto;
    width: calc(100% - 30px);
    @include ease("all", "swift-ease-in-out");
    &.animate {
      left: 15px;
    }
  }

  &.growlTopLeft,
  &.growlTopRight {
    top: 1rem;
    @for $i from 2 through 100 {
      &:nth-last-of-type(#{$i}) {
        top: (25px * $i);
        transform: scale(1- (calc(1 / 25)));
        z-index: 9999 - $i;
        filter: brightness(1- (calc(1 / 7)));
      }
    }
  }

  &.growlBottomLeft,
  &.growlBottomRight {
    bottom: 1rem;
    @for $i from 2 through 100 {
      &:nth-last-of-type(#{$i}) {
        bottom: (25px * $i);
        transform: scale(1- (calc(1 / 25)));
        z-index: 9999 - $i;
        filter: brightness(1- (calc(1 / 7)));
      }
    }
  }

  &.growlBottomLeft,
  &.growlBottomRight,
  &.growlTopLeft,
  &.growlTopRight {
    &:last-of-type {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    }
  }

  &.growlBottomRight,
  &.growlTopRight {
    right: -100%;
    left: auto;
    width: calc(100% - 30px);
    @include ease("all", "swift-ease-in-out");
    &.animate {
      right: 1rem;
    }
  }

  &:not(.launched) {
    animation: embedded-slide-in 200ms ease-in-out;
  }

  &.dialogue {
    .toast-content {
      display: flex;
      flex-direction: row !important;
      align-items: center;
    }
    p.message-only {
      flex: 3 0 0;
    }
    .dialogue {
      display: inherit;
    }
  }

  @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
    &.#{$name} {
      color: getContrastColor($name);
      background: $color;
    }
    &.novo-accent-#{$name} {
      border: 1px solid $color;
      background: getPaleColor($name);
      color: $dark;
    }
  }
}

@keyframes embedded-slide-in {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media screen and (min-width: 350px) {
  :host {
    &[class*="growl"] {
      min-width: 350px;
    }
    &.growlBottomLeft,
    &.growlTopLeft {
      left: -100%;
      right: auto;
      @include ease("all", "swift-ease-in-out");
      &.animate {
        left: 1rem;
      }
    }
    &.growlBottomRight,
    &.growlTopRight {
      right: -100%;
      left: auto;
      @include ease("all", "swift-ease-in-out");
      &.animate {
        right: 1rem;
      }
    }
  }
}