@import '../../../styles/core.scss';

.ColorPicker {
  display: inline-flex;

  &:global(.Input) {
    padding: 4px;
  }

  &:global(.Input_md) .ColorPicker-Wrapper {
    height: 38px;
    width: 38px;
  }

  &:global(.Input_md) .ColorPicker-Wrapper {
    height: 28px;
    width: 28px;
  }

  &:global(.Input_sm) .ColorPicker-Wrapper {
    height: 18px;
    width: 18px;
  }

  &-Wrapper {
    border-radius: 3px;
    margin-right: ms(-4);
    overflow: hidden;
  }

  &-Input {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    height: 100%;
    padding: 0;

    &:focus {
      outline: 0;
    }

    // these -moz-color-switch selectors were affecting chrome and safari
    @supports (-moz-appearance: none) {
      height: calc(100% + 2px);
      margin: -1px;

      &::-moz-color-swatch-wrapper {
        padding: 0;
      }

      &::-moz-color-swatch {
        border: none;
      }
    }

    &::-webkit-color-swatch-wrapper {
      padding: 0;
    }

    &::-webkit-color-swatch {
      border: none;
    }
  }

  &-Value {
    align-items: center;
    color: get('color' slate);
    display: flex;
    font-weight: 600;
    padding-right: ms(-4);
  }
}