.cl-values-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;

  label {
    font-size: var(--cl-font-md);
    color: var(--cl-primary-color);
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
  }

  div.cl-radio-inputs {
    display: flex;
    flex-direction: row;

    .cl-radio-input-wrapper {
      position: relative;
      display: flex;

      input {
        position: absolute;
        opacity: 0;
        visibility: hidden;

        &:checked + label {
          background-color: var(--cl-primary-color);
          color: #fff;
        }
      }

      label {
        border: solid 1px var(--cl-primary-color);
        padding: 5px 10px;
        font-size: var(--cl-font-sm);
        text-transform: capitalize;
      }

      &:not(:last-of-type) {
        label {
          border-right: none;
        }
      }

      &:last-of-type {
        label {
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
        }
      }

      &:first-of-type {
        label {
          border-bottom-left-radius: 5px;
          border-top-left-radius: 5px;
        }
      }
    }
  }

  .cl-textarea {
    textarea {
      width: 100%;
    }
  }

  #privacy-link-text,
  #privacy-link-link,
  #privacy-link-color {
    max-width: 120px;
  }

  .cl-toggle-input {

    position: relative;

    label {
      width: 60px;
      height: 30px;
      border-radius: 38px;
      background-color: #ccc;
      display: flex;
      padding:4px;
      transition: ease-in-out .3s;

      &:after {
        content: '';
        width: 22px;
        height: 22px;
        border-radius: 100%;
        background-color:#fff;
        transition: ease-in-out .3s;
      }
    }

    input {
      opacity: 0;
      position: absolute;
      visibility: hidden;
    }

    input:checked + label {
      background-color: var(--cl-primary-color);

      &:after {
        transform: translateX(calc(100% + 8px));
      }
    }
  }
}