.react-dat-gui .cr.color {
  border-left: $border-left-size solid $background-color;

  .swatch {
    text-align: center;
    font-weight: bold;
    color: white;
    text-shadow: rgba(0, 0, 0, 0.7) 0px 1px 1px;
    padding: $input-padding;
    border: $input-border;
    cursor: pointer;
  }

  .popover {
    position: absolute;
    z-index: 2;
    right: 5px;
  }

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

  .picker {
    background: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3);
    box-sizing: initial;
    width: auto;
    font-family: Menlo, sans-serif;
    margin-top: -3px;

    .body {
      padding: 0px;

      .controls {
        display: flex;

        .toggles {
          flex: 1;

          .hue-wrap {
            height: 10px;
            position: relative;
          }
        }
      }
    }

    .saturation-wrap {
      width: 100%;
      padding-bottom: 55%;
      position: relative;
      overflow: hidden;
    }
  }

  .fields-wrap {
    display: flex;

    .fields {
      flex: 1;
      display: flex;
      margin-left: -6px;

      .field {
        padding-left: 6px;
        width: 100%;

        input {
          font-size: 11px;
          color: #333;
          border-radius: 2px;
          border: none;
          box-shadow: inset 0 0 0 1px #dadada;
          height: 21px;
          text-align: center;

          &:focus {
            outline: none;
          }
        }

        label {
          text-transform: uppercase;
          font-size: 11px;
          line-height: 11px;
          color: #969696;
          text-align: center;
          display: block;
          margin-top: 12px;
        }
      }
    }
  }

  .pointer {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    transform: translate(-6px, -1px);
    background-color: rgb(248, 248, 248);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
    position: absolute;
    z-index: 3;
  }

  .pointer-circle {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px #fff;
    transform: translate(-6px, -6px);
  }
}
