MetaPhase-Consulting/State-TalentMAP

// We don't control these class names, so we ignore scss-lint SelectorFormat warnings

.Toastify__close-button { // scss-lint:disable SelectorFormat
  color: $color-black;
  position: absolute;
  right: 0;
}

.Toastify__toast { // scss-lint:disable SelectorFormat
  border-radius: 0;
  padding: 0;

  .usa-alert-heading {
    font-family: 'Merriweather';
  }

  .usa-alert {
    background-position-x: -11px;
    background-position-y: -21px;
    background-size: 86px;
    margin-top: 0;
    padding-bottom: 1.4rem;

    h3 {
      font-size: 1.7rem;
    }
  }

  .divider {
    border-bottom: 2px solid $color-black;
    margin-left: 30px;
    position: relative;
    top: 2px;
  }

  .usa-alert::before {
    width: 0;
  }

  .usa-alert-body {
    color: $color-black;
    padding-left: 7rem;
  }

  .usa-alert-text {
    font-size: .9em;
  }

  .usa-alert-text:only-child {
    padding-top: 1rem;
  }

  .usa-alert-success,
  .usa-alert-error,
  .usa-alert-info {
    .usa-alert-body {
      * {
        color: $color-white;
      }
    }
  }

  .usa-alert-success {
    background-color: $tertiary-success;
    background-image: url('#{$asset-path}assets/img/success.svg');

    .divider {
      border-bottom-color: $tertiary-success-lighter;
    }
  }

  .usa-alert-error {
    background-color: $secondary-darkest;
    background-image: url('#{$asset-path}assets/img/times-circle.svg');

    .divider {
      border-bottom-color: $secondary-darkest-2;
    }
  }

  .usa-alert-warning {
    background-color: $tertiary-gold;
    background-image: url('#{$asset-path}assets/img/warning.svg');

    .divider {
      border-bottom-color: $tertiary-gold-light;
    }
  }

  .usa-alert-info {
    background-color: $tertiary-cool-blue;
    background-image: url('#{$asset-path}assets/img/info.svg');
    background-position-y: -14px;

    .divider {
      border-bottom-color: $tertiary-cool-blue-lightest;
    }
  }

  .Toastify__toast-body {
    padding: 0;
    width: 100%;
  }
  
  .usa-alert-dark {
    background-color: $primary-alt-darkest;
    background-image: url('#{$asset-path}assets/img/handshake.svg');
    background-position-y: -14px;
    .divider {
      border-bottom-color: $tertiary-cool-blue-lightest;
    }
    .usa-alert-body {
      color: $color-white;
      padding-left: 7rem;
      a {
        color: $color-white;
        padding-left: 10px;
      }
      .bottom-section {
        margin-top: 20px;
        margin-left: -7em;
        font-size: 13px;
        text-align: end;
        button {
          border: 1px solid #eee;
          border-radius: 0;
          color: #f1f1f1;
          background-color: $primary-alt-darkest;
          padding: 5px;
          margin: 0;
          font-size: 13px;
        }
      }
    }
  }

  .hs-revoked-toast {
    background-color: $primary-alt-darkest;
    background-image: url('#{$asset-path}assets/img/handshake-closed.svg');
    background-position-y: -12px;
    background-position-x: -18px;
    .divider {
      border-bottom-color: $tertiary-cool-blue-lightest;
    }
    .usa-alert-body {
      padding-left: 6rem;
      .bottom-section {
        margin-top: 10px;
        font-size: 13px;
        text-align: center;
        button {
          border: 1px solid #eee;
          border-radius: 0;
          color: #f1f1f1;
          background-color: $primary-alt-darkest;
          padding: 5px;
          margin: 0;
          font-size: 13px;
        }
      }
    }
  }

  &.Toastify__toast--success,
  &.Toastify__toast--error,
  &.Toastify__toast--info,
  &.Toastify__toast--dark {
    .Toastify__close-button {
      color: $color-white;
    }
  }
}

.Toastify__toast-container { // scss-lint:disable SelectorFormat
  width: 400px;
    .Toastify__toast--dark {
      width: 500px;
      margin-left: -108px;
    }
}