/* ==========================================================================
  Main Container
  ========================================================================== */

$toast-info-color: #5BA4E5;
$toast-danger-color: #e25440;
$toast-warning-color: #F2A925;
$toast-success-color: #9FBB58;

$shadow: rgba(0, 0, 0, 0.05) 0 1px 5px;


@media (min-width: 401px) {
  main {

    // This is applied when there are 4 or more toasts
    &[data-toast-count],
    &[data-toast-count='4'] {
      bottom: 224px;
      .toasts.bottom {
        bottom: -224px;
      }
    }

    // When there's no top toasts
    &[data-toast-count='0'],
    &[data-toast-count='0'] .toasts.bottom {
      bottom: 0;
    }

    // When 1, 2 or 3 toasts
    &[data-toast-count='1'] {
      bottom: 56px;
      .toasts.bottom {
        bottom: -56px;
      }
    }
    &[data-toast-count='2'] {
      bottom: 112px;
      .toasts.bottom {
        bottom: -112px;
      }
    }
    &[data-toast-count='3'] {
      bottom: 168px;
      .toasts.bottom {
        bottom: -168px;
      }
    }

  }
  // main
}

// @media (min-width: 401px)

/* ==========================================================================
  Notifications
  ========================================================================== */

.toasts {

  @media (min-width: 401px) {
    &.top {
      max-height: (56px * 4);
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 980;
      width: 300px;
    }
    &.bottom {
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 980;
      width: 300px;
    }
  }

  @media (max-width: 400px) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
  }
}

.toast {
  width: 100%;
  min-height: 40px;
  max-height: 253px;
  margin: 0 0 15px 0;
  color: rgba(255, 255, 255, 0.9);
  background: $toast-info-color;
  position: relative;
  box-shadow: $shadow;
  transform: translateZ(0);

  @media (max-width: 400px) {
    margin-bottom: 1px;
  }


  button.close {
      padding: 0;
      cursor: pointer;
      background: transparent;
      border: 0;
      -webkit-appearance: none;
  }

  .toast-message {
    display: block;
    padding: 10px 43px 10px 57px;
    max-height: 253px;
    overflow: auto;
  }

  .toast-icon {
    // I don't like sizing and positioning, make something
    // that plays better with different font sizes
    font-size: 140%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 44px;
    padding: 11px 10px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.1);
  }

  .close {
    &:focus  {
      outline: none -webkit-focus-ring-color;
    }
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 34px;
    color: rgba(255, 255, 255, 0.6);
    &:hover {
      color: #fff;
    }

    i {
      padding: 12px;
      position: absolute;
      top: 0;
      right: 0;
    }
  }

  a {
    color: inherit;
    text-decoration: underline;
  }
}
.toast-success {
  background: $toast-success-color;
}

.toast-error {
  background: $toast-danger-color;
}

.toast-warn {
  background: $toast-warning-color;
}

.toast-info {
  background: $toast-info-color;
}