@import '../../_variables.scss';

.color-input {
  display: inline-flex;

  &-field.input {
    display: inline-flex;
    flex: 0 0 0;
    max-inline-size: 9em;
    align-items: stretch;
    padding-block: .2em;
    padding-inline: 8px;

    input {
      background: none;
      color: $fallback--lightText;
      color: var(--inputText, $fallback--lightText);
      border: none;
      padding: 0;
      margin: 0;

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

      &.nativeColor {
        flex: 0 0 2em;
        min-inline-size: 2em;
        align-self: center;
        block-size: 2em;
      }
    }
    .computedIndicator,
    .transparentIndicator {
      flex: 0 0 2em;
      min-inline-size: 2em;
      align-self: center;
      block-size: 100%;
    }
    .transparentIndicator {
      // forgot to install counter-strike source, ooops
      background-color: #FF00FF;
      position: relative;
      &::before, &::after {
        display: block;
        content: '';
        background-color: #000000;
        position: absolute;
        block-size: 50%;
        inline-size: 50%;
      }
      &::after {
        inset-block-start: 0;
        inset-inline-start: 0;
      }
      &::before {
        inset-block-end: 0;
        inset-inline-end: 0;
      }
    }
  }

  .label {
    flex: 1 1 auto;
  }

}
