.picker-wrapper {
  display: flex;

  label {
    margin-top: auto;
    margin-bottom: auto;
  }
}

.inputs-wrapper {
  display: flex;

  :global .input-text-wrap {
    margin: auto;
    padding: 0;
    width: 75px;

    input {
      text-transform: uppercase;
    }
  }

  .text-disabled & {
    :global .input-text-wrap {
      input {
        border: none;
      }
    }
  }
}

.bubble {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  border: 1px solid rgba(69, 69, 69, 0.5);
  margin-left: 5px;
  cursor: pointer;
  outline: none;

  &:focus {
    border-color: rgb(69, 69, 69);
    border-width: 2px;
  }
}

.reset-button {
  font-size: 20px;
  line-height: 25px;
  margin-right: 10px;
  cursor: pointer;
}

// if you set allowEmpty = true, it gives a big ugly x in the color picker window, so hide that sucka
:global .sp-container .sp-clear.sp-clear-display {
  display: none;
}