.wpcpo-items-wrapper {
  --border: #c3c4c7;
  --primary: #2271b1;
  --background2: #f7f7f7;
  padding: 6px 0 0 0;

  .wpcpo-items {
    position: relative;
    margin-bottom: 12px;

    .wpcpo-item {
      display: block;
      width: 100%;
      padding: 0;
      margin-bottom: 12px;
      background-color: #ffffff;
      border: 1px solid var(--border);
      position: relative;

      &:last-child {
        margin-bottom: 0;
      }

      .wpcpo-item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        line-height: 40px;
        padding: 0 40px 0 0;
        border: none;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        &:after {
          content: "\f140";
          display: inline-block;
          width: 40px;
          height: 40px;
          text-align: center;
          font: normal 16px/40px dashicons;
          position: absolute;
          top: 0;
          right: 0;
          speak: none;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          text-decoration: none !important;
        }
      }

      .wpcpo-item-content {
        border-top: 1px solid var(--border);
        display: none;
        padding: 15px;
        background: var(--background2);

        .wpcpo-image-selector {
          display: flex;
          align-items: center;

          .wpcpo-image-preview {
            width: 30px;
            height: 30px;
            background-color: #f7f7f7;
            cursor: pointer;
            border-radius: 3px;
            flex: 0 0 30px;
            margin-right: 5px;
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='12' y1='8' x2='12' y2='16'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");
            background-position: center;
            background-repeat: no-repeat;

            img {
              height: 30px;
              width: 30px;
              border-radius: 3px;
            }
          }
        }
      }

      .wpcpo-item-line {
        padding: 15px 20px;
        border-bottom: 1px solid #eee;

        &:last-child {
          margin-bottom: 0;
        }

        label {
          float: none;
          margin: 0;
          width: auto;
        }

        input {
          &[type="text"],
          &[type="password"],
          &[type="number"] {
            width: auto;
            float: none;
          }
        }

        select {
          float: none;
        }

        .input-block {
          display: block !important;
          width: 100% !important;
          margin-top: 8px;
          float: none;
        }

        .checkbox-show {
          display: none !important;
          margin-top: 10px;
        }

        input[type="checkbox"] {
          &:checked + .checkbox-show, &:checked + * + .checkbox-show {
            display: block !important;
          }
        }

        &:last-child {
          border-bottom: 0;
        }

        .option-type {
          ~ .wpcpo-price-custom-wrapper, ~ .wpcpo-price-custom {
            display: none;
          }

          &.type-custom {
            ~ .wpcpo-price-custom-wrapper, ~ .wpcpo-price-custom {
              display: inline-block;
              flex-grow: 1;
            }

            ~ .wpcpo-price-wrapper, ~ .wpcpo-price {
              display: none;
            }
          }
        }
      }

      &.active {
        .wpcpo-item-header {
          &:after {
            content: "\f142";
          }
        }

        .wpcpo-item-content {
          display: block;
        }
      }

      &:hover {
        .wpcpo-item-remove {
          opacity: 1;
          visibility: visible;
        }
      }

      .wpcpo-item-move {
        cursor: move;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        text-align: center;
        font-size: 0;
        border-right: 1px solid #ddd;
        margin-right: 10px;

        &:before {
          content: "\f545";
          display: inline-block;
          width: 40px;
          height: 40px;
          text-align: center;
          font: normal 12px/40px dashicons;
          speak: none;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          text-decoration: none !important;
        }
      }

      .wpcpo-item-label {
        font-weight: 600;
        flex-grow: 1;
        text-overflow: ellipsis;
        font-size: 14px;
        display: flex;
        align-items: center;
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;

        .required {
          margin-left: 5px;
        }

        .type, .key {
          display: inline-block;
          line-height: 1;
          font-weight: 400;
          margin-left: 10px;
          color: #fff;
          font-size: 10px;
          padding: 4px 8px;
          border-radius: 4px;
        }

        .type {
          background-color: #555555;
        }

        .key {
          background-color: #999999;
        }

        .logic {
          display: inline-block;
          margin-left: 10px;
          line-height: 1;
        }
      }

      .wpcpo-item-remove {
        color: #ff4f3b;
        text-decoration: underline;
        margin: 0 5px;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
      }

      &[class*="wpcpo-item-appearance-"] {
        .wpcpo-item-label {
          .type {
            background-color: #999999;
          }
        }
      }
    }

    .wpcpo-inner-options {
      border: 1px solid var(--background2);

      &.wpcpo-logic-conditions {
        margin-top: 10px;
      }

      .inner-header {
        background: var(--background2);
        display: flex;
        align-items: center;
        position: relative;
        padding: 10px 40px;
        column-gap: 0;
        font-weight: 600;

        & > * {
          flex-grow: 1;
          padding: 0 5px;
        }
      }

      .inner-content {
        .inner-option {
          display: flex;
          align-items: center;
          position: relative;
          padding: 10px 40px;
          column-gap: 0;
          border-bottom: 1px solid var(--background2);
          background-color: #ffffff;

          .inner-option-move, .inner-option-remove {
            position: absolute;
            top: 50%;
            bottom: 0;
            width: 30px;
            height: 30px;
            line-height: 28px;
            text-align: center;
            transform: translateY(-50%);
          }

          .inner-option-move {
            left: 0;
            cursor: move;

            &:before {
              content: "\f545";
              display: block;
              text-align: center;
              font: normal 12px/28px dashicons;
              speak: none;
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale;
              text-decoration: none !important;
            }
          }

          .inner-option-remove {
            right: 0;
          }

          & > * {
            flex-grow: 1;
            padding: 0 5px;

            &.inner-option-image {
              width: 50px;
              flex: 0 0 50px;
            }

            &.inner-option-color {
              width: 120px;
              flex: 0 0 120px;
            }

            &.inner-option-price {
              display: flex;
              align-items: center;

              select {
                width: auto;
              }

              .wpcpo-price-wrapper {
                flex-grow: 1;
              }
            }
          }

          input, select {
            width: 100%;
            max-width: 100%;
          }
        }
      }

      .inner-footer {
        padding: 10px 20px;
      }
    }
  }

  // Tab
  .nav-tab-wrapper {
    .nav-tab-active {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
    }
  }

  .nav-tab-content {
    display: none;
    border: 1px solid var(--border);
    background: #fff;

    &.active {
      display: block;
    }
  }

  .wpcpo-fields-single-product & {
    padding: 12px;
  }
}

.wpcpo-color-selector {
  .wp-picker-container {
    position: relative;

    .wp-color-result {
      margin: 0;
    }

    .wp-picker-input-wrap {
      display: none;
    }

    .wp-picker-holder {
      background-color: #ffffff;
      position: absolute;
      z-index: 999;
    }
  }
}

#wpcpo_configuration {
  .select2-container {
    width: 100% !important;
    max-width: 100% !important;
  }
}

.wpcpo-has-error {
  border-color: #dc3232 !important;
}