@import "variables";

.pgn__color-picker {
  box-shadow: 0 0 3px 1px $gray-300;
  border: none;
  background:
    linear-gradient(to bottom right,
    rgb(255, 0, 0) 0%,
    rgb(255, 154, 0) 17%,
    rgb(208, 222, 33) 33%,
    rgb(79, 220, 74) 40%,
    rgb(28, 127, 238) 75%,
    rgb(95, 21, 242) 86%,
    rgb(186, 12, 248) 100%
  );

  &.pgn__color-picker-sm {
    height: $picker-size-sm;
    width: $picker-size-sm;
  }

  &.pgn__color-picker-md {
    height: $picker-size-md;
    width: $picker-size-md;
  }
}

.pgn__color-modal {
  background: $white;
  padding-bottom: .1rem;
  margin-bottom: 1rem;
}

.pgn__color-error {
  font-size: 70%;
  flex: 1 1 auto;
  margin-left: .5rem;
}

.pgn__hex-label {
  font-weight: bold;
  font-size: $h5-mobile-font-size;
  padding: .5rem;
  margin-bottom: 0 !important;
}

.pgn__hex-form {
  display: flex;
  max-width: 180px;
  margin: 5px;
  flex-wrap: wrap;

  div {
    display: inline-flex;
  }

  .pgn__hex-field {
    @media (min-width: map-get($grid-breakpoints, "sm")) {
      margin-inline-end: 0;
    }
  }
}