@import "../lib.less";

.@{veui-prefix}-toast {
  display: flex;
  align-items: flex-start;
  line-height: @dls-toast-line-height;
  padding: @dls-toast-padding-y @dls-toast-padding-x;
  position: absolute;
  max-width: @dls-toast-max-width;
  background-color: @dls-toast-background-color;
  color: @dls-toast-font-color;
  box-shadow: @dls-toast-shadow;

  &-multiline {
    .padding(@dls-toast-padding-y, _);
  }

  &-state,
  &-close {
    display: flex;
    align-items: center;
  }

  &-state {
    margin-right: @dls-toast-content-spacing-before;
  }

  &-icon {
    .dls-icon-size(@dls-toast-icon-size);
  }

  &-close {
    .@{veui-prefix}-icon {
      .dls-icon-size(@dls-toast-icon-size-aux);
    }

    .@{veui-prefix}-button {
      font-size: inherit;
    }
  }

  .veui-toast-style(@type) {
    @color-name: ~"dls-toast-icon-color-@{type}";
    @color: @@color-name;

    .@{veui-prefix}-toast-icon {
      color: @color;
    }
  }

  &-content {
    flex-grow: 1;
    margin-right: @dls-toast-content-spacing-after;

    &-title {
      font-weight: @dls-toast-title-font-weight;
      line-height: @dls-toast-title-line-height;
      padding-bottom: @dls-toast-title-spacing-after;
      color: @dls-toast-title-font-color;
    }

    &-message {
      display: inline;
      box-shadow: transparent 0 0;
    }
  }

  &-success {
    .veui-toast-style(success);
  }

  &-warning {
    .veui-toast-style(warning);
  }

  &-info {
    .veui-toast-style(info);
  }

  &-error {
    .veui-toast-style(error);
  }

  /* 有title样式 */
  &&-titled {
    padding: @dls-toast-padding-y-titled @dls-toast-padding-x;

    .@{veui-prefix}-toast-icon {
      .dls-icon-size(@dls-toast-icon-size-titled);
    }

    .@{veui-prefix}-toast-close {
      align-items: start;
    }
  }

  &[ui~="m"] {
    font-size: @dls-toast-font-size-m;
    border-radius: @dls-toast-border-radius-m;

    .@{veui-prefix}-toast {
      &-state,
      &-close {
        font-size: @dls-toast-font-size-m;
        height: dls-line-height(@dls-toast-line-height, @dls-toast-font-size-m);
      }

      &-content {
        &-title {
          font-size: @dls-toast-title-font-size-m;
        }
      }
    }
  }

  &-titled[ui~="m"] {
    .@{veui-prefix}-toast {
      &-state,
      &-close {
        font-size: @dls-toast-title-font-size-m;
        height: dls-line-height(
          @dls-toast-title-line-height,
          @dls-toast-title-font-size-m
        );
      }
    }
  }

  &[ui~="s"] {
    font-size: @dls-toast-font-size-s;
    border-radius: @dls-toast-border-radius-s;

    .@{veui-prefix}-toast {
      &-state,
      &-close {
        font-size: @dls-toast-font-size-s;
        height: dls-line-height(@dls-toast-line-height, @dls-toast-font-size-s);
      }

      &-content {
        &-title {
          font-size: @dls-toast-title-font-size-s;
        }
      }
    }
  }

  &-titled[ui~="s"] {
    .@{veui-prefix}-toast {
      &-state,
      &-close {
        font-size: @dls-toast-title-font-size-s;
        height: dls-line-height(
          @dls-toast-title-line-height,
          @dls-toast-title-font-size-s
        );
      }
    }
  }
}