.color-select-box {
  margin: 0 0 10px 0;

  .color-name {
    color: var(--kw-heading-color);
    height: 22px;
    line-height: 22px;
    margin-bottom: 8px;
  }

  .color-select-container {
    .color-box {
      width: 100%;
      height: 34px;
      display: flex;
      padding: 8px 12px;
      background: rgba(255, 255, 255, 1);
      border-radius: 3px;
      border: 1px solid rgba(230, 230, 230, 1);

      &:hover,
      &.color-focused {
        border: 1px solid var(--kw-primary-color-hover);
      }

      .color-block {
        width: 18px;
        height: 18px;
        border-radius: 3px;
        border: 1px solid rgba(229, 229, 229, 1);
      }

      .color {
        width: 100px;
        margin: -2px 0 0 10px;
      }
    }

    .color-box-view {
      border: 1px solid #d9d9d9 !important;
      background: #f5f5f5;
      cursor: not-allowed;
    }
  }

  .color-picker {
    margin: 5px 0 0 0;
    position: absolute;
    z-index: 1;

    .cover {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    .color-plate {
      width: 220px !important;
    }
  }
}

.icon-box {
  .icon {
    // color: #fff;
    font-size: 20px;
    transform: rotate(90deg);
  }
}
