@import "mixins";
@import "themes";

.toasted-container {
  // fix for min-height bug in IE
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 10000;

  &.full-width {
    display: flex;
    flex-direction: column;
    max-width: 86%;
    width: 100%;

    // check if user needs this to be fitted into screen
    &.fit-to-screen {
      @include fit-to-screen
    }
  }

  // Positioning

  &.top-right {
    top: 10%;
    right: 7%;

    &:not(.full-width) {
      align-items: flex-end;
    }
  }

  &.top-left {
    top: 10%;
    left: 7%;

    &:not(.full-width) {
      align-items: flex-start;
    }
  }

  &.top-center {
    top: 10%;
    left: 50%;
    align-items: center;
    transform: translateX(-50%);
  }

  &.bottom-right {
    right: 5%;
    bottom: 7%;

    &:not(.full-width) {
      align-items: flex-end;
    }
  }

  &.bottom-left {
    left: 5%;
    bottom: 7%;

    &:not(.full-width) {
      align-items: flex-start;
    }
  }

  &.bottom-center {
    left: 50%;
    bottom: 7%;
    align-items: center;
    transform: translateX(-50%);
  }

  // fix positioning floating
  &.top-left .toasted, &.bottom-left .toasted {
    float: left;
  }

  &.top-right .toasted, &.bottom-right .toasted {
    float: right;
  }

  // toast element styling
  .toasted {
    top: 35px;
    width: auto;
    clear: both;
    margin-top: .8em;
    position: relative;
    max-width: 100%;
    height: auto;
    word-break: break-all;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: inherit;

    .material-icons {
      margin-right: .5rem;
      margin-left: -.4rem;

      &.after {
        margin-left: .5rem;
        margin-right: -.4rem;
      }
    }

    // Toast Action Styling
    .actions-wrapper {
      margin-left: .4em;
      margin-right: -1.2em;

      .action {
        text-decoration: none;
        font-size: 0.9rem;
        padding: 8px;
        border-radius: 3px;
        text-transform: uppercase;
        letter-spacing: .03em;
        font-weight: 600;
        cursor: pointer;
        margin-right: .2rem;

        &.icon {
          padding: 4px;
          display: flex;
          align-items: center;
          justify-content: center;

          .material-icons {
            margin-right: 0;
            margin-left: 4px;
          }

          &:hover {
            text-decoration: none;
          }
        }

        &:hover {
          text-decoration: underline;
        }
      }
    }


  }
}

@media only screen and (max-width: 600px) {
  #toasted-container {
    @include fit-to-screen;

    &.top-center, &.bottom-center {
      align-items: stretch !important;
    }

    &.top-right, &.top-left, &.bottom-left, &.bottom-right {
      .toasted {
        float: none;
      }
    }

    .toasted {
      border-radius: 0;
    }

  }
}