.color-input {
  &__viewer {
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border-radius: 2px;
    border: 1px solid rgba(87, 112, 131, 0.3);
    margin: auto 6px;
  }

  &__viewer--size-large {
    width: 24px;
    height: 24px;
  }

  &__viewer-line {
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to top left,
      rgba(214, 69, 61, 0) 0%,
      rgba(214, 69, 61, 0) calc(50% - 0.8px),
      rgba(214, 69, 61, 1) 50%,
      rgba(214, 69, 61, 0) calc(50% + 0.8px),
      rgba(214, 69, 61, 0) 100%
    );
  }

  &__hash {
    font-family: var(
      --wds-font-family-default,
      var(
        --wsr-font-family,
        Madefor,
        'Helvetica Neue',
        Helvetica,
        Arial,
        'メイリオ',
        'meiryo',
        'ヒラギノ角ゴ pro w3',
        'hiragino kaku gothic pro',
        sans-serif
      )
    );
    font-size: var(
      --wds-font-size-body-medium,
      var(--wsr-text-font-size-medium, 16px)
    );
    font-weight: var(
      --wds-font-weight-medium,
      var(--wsr-font-weight-medium, 530)
    );
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
    line-height: unset;
    padding-left: 6px;
    color: var(--wds-color-black-400, var(--wsr-color-D40, #868aa5));
  }

  &__hash--size-small {
    font-size: 14px;
  }

  &__hash--disabled {
    color: var(--wds-color-black-550, var(--wsr-color-D55, #cfd1dc));
  }

  &__drawer-content {
    display: flex;
    justify-content: center;
    padding-bottom: var(--wds-space-200, 12px);
  }
}