.color-input {
  display: inline-flex;

  .label {
    flex: 1 1 auto;
  }

  .opt {
    margin-right: 0.5em;
  }

  &-field.input {
    display: inline-flex;
    flex: 0 0 0;
    max-width: 9em;
    align-items: stretch;

    input {
      color: var(--text);
      background: none;
      border: none;
      padding: 0;
      margin: 0;

      &.textColor {
        flex: 1 0 3em;
        min-width: 3em;
        padding: 0;
      }
    }

    .nativeColor {
      cursor: pointer;
      flex: 0 0 auto;
      padding: 0;

      input {
        appearance: none;
        max-width: 0;
        min-width: 0;
        max-height: 0;
        /* stylelint-disable-next-line declaration-no-important */
        opacity: 0 !important;
      }
    }

    .computedIndicator,
    .validIndicator,
    .invalidIndicator,
    .transparentIndicator {
      flex: 0 0 2em;
      margin: 0.2em 0.5em;
      min-width: 2em;
      align-self: stretch;
      min-height: 1.1em;
      border-radius: var(--roundness);
    }

    .invalidIndicator {
      background: transparent;
      box-sizing: border-box;
      border: 2px solid var(--cRed);
    }

    .transparentIndicator {
      // forgot to install counter-strike source, ooops
      background-color: #f0f;
      position: relative;

      &::before,
      &::after {
        display: block;
        content: "";
        background-color: #000;
        position: absolute;
        height: 50%;
        width: 50%;
      }

      &::after {
        top: 0;
        left: 0;
        border-top-left-radius: var(--roundness);
      }

      &::before {
        bottom: 0;
        right: 0;
        border-bottom-right-radius: var(--roundness);
      }
    }

    &.disabled,
    &:disabled {
      .nativeColor input,
      .computedIndicator,
      .validIndicator,
      .invalidIndicator,
      .transparentIndicator {
        /* stylelint-disable-next-line declaration-no-important */
        opacity: 0.25 !important;
      }
    }
  }
}
