@import '../../scss/variables';
@import '../../scss/animate';

#toast-container {
  position: fixed;
  z-index: 99999;

  > div {
    padding: 0 0 0 15px;
    position: relative;
    overflow: hidden;
    margin: 0 0 6px;
    width: 320px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    -moz-box-shadow: 0 0 12px #999999;
    -webkit-box-shadow: 0 0 12px #999999;
    box-shadow: 0 0 12px #999999;
    color: $sky-color-white;
  }

  * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  > :hover {
    -moz-box-shadow: 0 0 12px #000000;
    -webkit-box-shadow: 0 0 12px #000000;
    box-shadow: 0 0 12px #000000;
    cursor: pointer;
  }
}

.toast-close {
  float: right;
  width: 15%;
  text-align: center;
  -moz-border-radius: 0 3px 3px 0;
  -webkit-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
  position: absolute;
  right: 0px;
  height: 100%;

  .fa-times {
    position: absolute;
    left: 40%;
    top: 40%;
  }
}

.toast-title {
    font-weight: bold;
}

.toast-message {
  width: 85%;
  float: left;
  word-wrap: break-word;
  font-weight: bold;
  padding: 15px 10px 15px 0;
}

.toast-success {
  background-color: $sky-highlight-color-success;

  .toast-close {
    background-color: $sky-background-color-success;
    color: $sky-highlight-color-success;
    border: 1px solid $sky-highlight-color-success;

    &:hover {
      background-color: $sky-color-green-30;
    }
  }

  a {
    color: $sky-highlight-color-success;

    &:hover {
      color: $sky-color-green-30;
    }
  }
}

.toast-info {
  background-color: $sky-highlight-color-info;

  .toast-close {
    background-color: $sky-background-color-info;
    color: $sky-highlight-color-info;
    border: 1px solid $sky-highlight-color-info;

    &:hover {
      background-color: $sky-background-color-info-light;
    }
  }

  a {
    color: $sky-highlight-color-info;

    &:hover {
      color: $sky-background-color-info-light;
    }
  }
}

.toast-warning {
  background-color: $sky-highlight-color-warning;

  .toast-close {
    background-color: $sky-background-color-warning;
    color: $sky-highlight-color-warning;
    border: 1px solid $sky-highlight-color-warning;

    &:hover {
      background-color: $sky-color-yellow-30;
    }
  }

  a {
    color: $sky-highlight-color-warning;

    &:hover {
      color: $sky-color-yellow-30;
    }
  }
}

.toast-error {
  background-color: $sky-highlight-color-danger;

  .toast-close {
    background-color: $sky-background-color-danger;
    color: $sky-highlight-color-danger;
    border: 1px solid $sky-highlight-color-danger;

    &:hover {
      background-color: $sky-color-red-30;
    }
  }

  a {
    color: $sky-highlight-color-danger;

    &:hover {
      color: $sky-color-red-30;
    }
  }
}

.toast-top-center {
  top: 0;
  right: 0;
  width: 100%;
}

.toast-bottom-center {
  bottom: 0;
  right: 0;
  width: 100%;
}

.toast-top-left {
  top: 12px;
  left: 12px;
}

.toast-top-right {
  top: 12px;
  right: 12px;
}

.toast-bottom-right {
  right: 12px;
  bottom: 12px;
}

.toast-bottom-left {
  bottom: 12px;
  left: 12px;
}