@import "common/var";
@import "mixins/mixins";

$namespace: 'dbj';
@include b(reader) {
  padding-top: 12px;

  @include e(trigger) {
    display: block;
    line-height: 16px;
    height: 16px;
  }

  @include e(input) {
    display: none;
  }

  @include e(button) {
    color: $--color-primary;
    font-size: 12px;
    height: 16px;
    line-height: 16px;
    i {
      font-size: $--font-size-icon-base;
      margin-right: 4px;
      vertical-align: -2px;
    }
    &:hover {
      color: $--color-primary-hover;
    }
    &:click {
      color: $--color-primary-active;
    }
  }

  @include e(tip) {
    font-size: 12px;
    line-height: 16px;
    margin-top: 4px;
    color: $--color-info;
  }

  @include e(panel) {
    display: none;
    flex-flow: row nowrap;
    align-items: center;
    font-size: 12px;
    line-height: 16px;
    padding-bottom: 20px;
  }

  @include e(info) {
    display: flex;
    width: 400px;
    flex-flow: row nowrap;
    align-items: center;
  }

  @include e(success-icon) {
    font-size: $--font-size-icon-base;
    color: $--color-primary;
    margin-left: 12px;
    vertical-align: middle;
  }

  @include e(clear-icon) {
    font-size: $--font-size-icon-base;
    color: $--color-text-light;
    margin-left: 12px;
    cursor: pointer;
    &:hover {
      color: $--color-text-primary;
    }
  }

  @include e(replace-icon) {
    font-size: $--font-size-icon-base;
    color: $--color-text-light;
    margin-left: 12px;
    cursor: pointer;
    &:hover {
      color: $--color-text-primary;
    }
  }

  &.is-uploaded {
    .dbj-reader__trigger,
    .dbj-reader__tip {
      display: none;
    }
    .dbj-reader__panel {
      display: flex;
    }
  }

  @include m(not-support) {
    color: $--color-info;
    font-size: 12px;
  }
}

$namespace: 'el';