/**
 * AppBuckets UI
 *
 * _Toast @ src/styles/elements/_toast.scss
 *
 * Defined at 03 ott 2020
 * Copyright Marco Cavanna • 2020
 *
 * ---
 *
 *
 */

/******
    Base Toast Style
******/
.toast {
  border-radius: $toast-border-radius;
  padding: $toast-content-padding;
  width: $toast-width-on-tablet-up;

  background-color: $toast-background-color;
  color: $toast-font-color;
  font-weight: $toast-font-weight;

  display: flex;
  align-items: center;

  @include smoothShadow($toast-shadow-elevation);

  @include max-screen('phone') {
    width: 100%;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
}

/******
    Adjust Header Size
******/
.toast > .header {
  margin: 0;
  padding: 0;
  flex: 1;

  > .header-icon {
    font-size: $toast-icon-size;
  }

  > .header-content {
    font-size: 1em;

    > .subheader {
      opacity: $toast-content-opacity;
    }
  }
}

/******
    Adjust Dismiss Icon
******/
.toast > .dismiss {
  margin: 0 0 0 .5em;
  padding: 0;
  flex-shrink: 0;
  font-size: $toast-icon-size;

  @include hover {
    opacity: $toast-dismiss-icon-opacity;
    will-change: opacity;
    transition: opacity $transition-ease $transition-speed-fast;

    &:hover {
      opacity: 1;
    }
  }
}

/******
    Set Toast Colors
******/
.toast {
  @each $label, $color in $ui-color-map {
    &.is-#{$label} {
      > .header > .header-icon {
        color: $color;
      }
    }
  }
}

/******
    Set Toast Events when clickable
******/
.toast {
  @include unselectable;

  // ----
  //  Show Click Behaviour on Clickable Toast
  // ----
  &.clickable {
    cursor: pointer;
    pointer-events: initial;

    @include hover {
      opacity: 1;
      will-change: opacity;
      transition: opacity $transition-ease $transition-speed-fast;

      &:hover {
        opacity: $toast-clickable-hover-opacity;
      }
    }
  }
}