@import "./Container/style.less";

@toaster-prefix: ~'@{icecream-prefix}-toaster';
@toaster-icon-prefix: ~'@{toaster-prefix}-icon';

@toaster-height: 44px;
@toaster-width: 290px;
@toaster-font-size: @icecream-font-size-main;
@toaster-icon-size: @icecream-font-size-lg;
@toaster-text-height: getIcecreamLineHeightByPx(@toaster-font-size);
@toaster-padding-vertical: round((@toaster-height - @toaster-text-height) / 2);

.@{toaster-prefix} {
  .extendBase();
  display: flex;
  width: @toaster-width;
  padding: @toaster-padding-vertical @icecream-gap-md;
  color: @icecream-color-grey-10;
  font-size: @toaster-font-size;
  background: @icecream-color-grey-1;
  box-shadow: @icecream-box-shadow-lg;
  border-radius: @icecream-border-radius;

  &-icon {
    margin-right: @icecream-gap-xs;
    font-size: @toaster-icon-size;
    padding-top: (@toaster-text-height - @toaster-icon-size) / 2;
    line-height: 0;
  }
}

.@{toaster-prefix} {
  &&-info {
    .@{toaster-icon-prefix} {
      color: @icecream-primary-color;
    }
  }

  &&-success {
    .@{toaster-icon-prefix} {
      color: @icecream-success-color;
    }
  }

  &&-error {
    .@{toaster-icon-prefix} {
      color: @icecream-error-color;
    }
  }

  &&-warning {
    .@{toaster-icon-prefix} {
      color: @icecream-warning-color;
    }
  }
}

.@{toaster-prefix}-animate-container {
  position: relative;
  overflow: hidden;
  width: @toaster-width;
  border-radius: @icecream-border-radius;
  transition: all 150ms;

  .@{toaster-prefix} {
    position: absolute;
    bottom: 0;
  }

  &&-show {
    box-shadow: @icecream-box-shadow-lg;
    margin-bottom: @icecream-gap-md-x;
    transition-timing-function: ease-out;
  }

  &&-hide {
    box-shadow: none;
    margin-bottom: 0;
    transition-timing-function: ease-in;
  }
}