.keen-theme-builder {
  .custom-color-picker {
    min-width: 0;
    position: relative;

    &__title {
      margin-bottom: var(--base-label-margin);
      font-size: var(--base-font-size);
      line-height: var(--base-line-height);
    }

    &__wrapper {
      background-color: var(--color-white);
      border: 1px solid var(--color-light-gray);
      border-radius: var(--base-border-radius);
      display: flex;
      align-items: center;
      height: var(--base-control-height);

      &:hover {
        border-color: var(--color-blue);
      }

      input {
        width: 100%;
        padding: 0.4375rem 0.75rem;
        background: transparent;
        border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
        font-family: var(--font-primary);
        font-size: var(--base-font-size);
      }
    }

    &__popover {
      position: absolute;
      top: 0;
      left: 50px;
      z-index: 10;
      padding: var(--base-label-margin);
      background-color: var(--color-white);
      border-radius: 4px;
      box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.15) 0px 8px 16px;

      .sketch-picker {
        padding: 0 !important;
        box-shadow: none !important;
      }

      .btn {
        margin-bottom: var(--base-label-margin);
      }

      .btn-close {
        position: absolute;
        top: 0;
        right: 0;
        padding: var(--base-label-margin);
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1;
        background: none;
        color: var(--color-light-gray);
        border: none;
        cursor: pointer;

        &:focus {
          outline: none;
        }    
      }
    }

    &__cover {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
    }

    &__color {
      height: 32px;
      width: 32px;
      border-radius: var(--base-border-radius) 0 0 var(--base-border-radius);
      border-right: 1px solid var(--color-light-gray);
    }

    &__swatch {
      cursor: pointer;
    }
  }
}