#nitrogen-inspector {
  .color-picker {
    position: relative;

    &--open {
      z-index: 50;
    }

    &__container {
      width: 1.75rem;
      height: 1.75rem;
      position: relative;
      border-radius: 0.5rem;
      cursor: pointer;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5),
        0 1px 2px 0 rgba(0, 0, 0, 0.06);

      &__btn {
        position: absolute;
        width: 50%;
        height: 50%;
        top: 50%;
        left: 50%;
        background-color: #ffffff;
        transition-property: opacity;
        transform: translate(-50%, -50%);
        border-radius: 9999px;
        box-shadow: 0 1px 2px 0 #000000;
        opacity: 0;

        &--inherit-val {
          opacity: 1;
        }
      }
    }

    &__panel {
      position: absolute;
      right: 0;
      top: 100%;
      background-color: #ffffff;
      border-radius: 0.5rem;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);

      @media (prefers-color-scheme: dark) {
        background-color: #586674;
      }

      .rgba-string-color-picker {
        border-radius: 0;

        .react-colorful__saturation-pointer {
          width: 16px;
          height: 16px;
          border-radius: 3px;
        }
        .react-colorful__hue-pointer,
        .react-colorful__alpha-pointer {
          width: 16px;
          border-radius: 3px;
        }
      }

      .hex-color-input {
        padding: 0.25rem;
        color: #000000;
        text-align: center;
        width: 100%;
        border-bottom-width: 1px;
        border-color: #c5ccd3;
        outline: 0;
        background-color: #f1f2f4;

        @media (prefers-color-scheme: dark) {
          background-color: #21262b;
          border-color: #6e7f91;
          color: #e2e5e9;
        }
      }

      &__preset-btns {
        display: flex;
        padding: 0.75rem;
        flex-wrap: wrap;
        gap: 0.25rem;

        &__btn {
          width: 1.5rem;
          height: 1.5rem;
          border-radius: 0.5rem;
          border-width: 2px;
          border-color: #ffffff;
          cursor: pointer;
          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
            0 1px 2px 0 rgba(0, 0, 0, 0.06);

          &--active {
            border-color: rgb(108, 167, 238, 1);
          }
        }
      }
    }
  }
}
