// ENS ACFW Custom Checkout Fields
#enspireplugins_acfw_auto_fields {
  .wc-block-components-checkout-step__heading {
    margin-top: 16px;

    &:first-child {
      margin-top: 0;
    }
  }
}

.enspireplugins_acfw-field {
  &.wc-block-components-text-input {
    margin-top: 16px;
    position: relative;

    &:first-child {
      margin-top: 0;
    }

    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="number"],
    input[type="tel"],
    input[type="password"] {
      appearance: none;
      background-color: #fff;
      border: 1px solid hsla(0, 0%, 7%, 0.8);
      border-radius: 4px;
      box-sizing: border-box;
      color: #2b2d2f;
      font-family: inherit;
      font-size: 1em;
      height: 3.125em;
      line-height: 1em;
      margin: 0;
      min-height: 0;
      padding: 1.2em .5em .5em .5em;
      width: 100%;

    //   &:focus,
    //   &.is-active,
    //   &:-webkit-autofill {
    //     padding: 1.5em 0.5em 0.5em;
    //   }

      &:focus {
        border-color: currentColor;
        border-width: 1.5px;
        outline: 0;
      }

      &::placeholder {
        color: transparent;
      }
    }

    label {
      color: inherit;
      color: hsla(0, 0%, 7%, 0.7);
      cursor: text;
      font-family: inherit;
      font-size: inherit;
      font-size: 1em;
      font-style: inherit;
      font-weight: inherit;
      left: 0.5625em;
      letter-spacing: inherit;
      line-height: inherit;
      line-height: 1.5;
      margin: 0;
      max-width: calc(100% - 32px);
      overflow: hidden;
      position: absolute;
      text-decoration: inherit;
      text-overflow: ellipsis;
      white-space: nowrap;
      transform: translateY(4px) scale(0.75);
      text-transform: inherit;
      top: 1.562em;
      transform: translateY(-50%);
      transform-origin: top left;
      transition: all 0.2s ease;
    }

    input:focus + label,
    input:not(:placeholder-shown) + label,
    input.is-active + label,
    input:-webkit-autofill + label {
      top: 0;
      transform: translateY(4px) scale(0.75);
    }

    // Error state
    .has-error & {
      input[type="text"],
      input[type="email"],
      input[type="url"],
      input[type="number"],
      input[type="tel"],
      input[type="password"] {
        border-color: #cc1818;
        color: #cc1818;
      }

      label {
        color: #cc1818;
      }
    }
  }

  // Textarea Fields
  &.wc-block-components-textarea {
    margin-top: 16px;
    position: relative;
    padding: 0 !important;
    border: none !important;

    &:first-child {
      margin-top: 0;
    }

    textarea {
      appearance: none;
      background-color: #fff;
      border: 1px solid hsla(0, 0%, 7%, 0.8);
      border-radius: 4px;
      box-sizing: border-box;
      color: #2b2d2f;
      font-family: inherit;
      font-size: 1em;
      line-height: 1.5;
      margin: 0;
      min-height: 6em;
      padding: 1em 0.5em;
      resize: vertical;
      width: 100%;

      &:focus {
        border-color: currentColor;
        border-width: 1.5px;
        outline: 0;
        padding: 1.5em 0.5em 0.5em;
      }

      &::placeholder {
        color: transparent;
      }
    }

    label {
      color: hsla(0, 0%, 7%, 0.7);
      font-size: 1em;
      left: 0.5625em;
      line-height: 1.5;
      margin: 0;
      max-width: calc(100% - 32px);
      overflow: hidden;
      position: absolute;
      text-overflow: ellipsis;
      top: 1.5625em;
      transform: translateY(-50%);
      transform-origin: top left;
      transition: all 0.2s ease;
      white-space: nowrap;
      text-transform: inherit;
    }

    textarea:focus + label,
    textarea:not(:placeholder-shown) + label {
      top: 0;
      transform: translateY(4px) scale(0.75);
    }
  }

  // Select Fields
  //   &.wc-blocks-components-select {
  //     margin-top: 16px;

  //     &:first-child {
  //       margin-top: 0;
  //     }

  //     .wc-blocks-components-select__container {
  //       background: #fff;
  //       border-radius: 4px;
  //       box-sizing: border-box;
  //       height: 3.125em;
  //       position: relative;
  //       width: 100%;
  //     }

  //     .wc-blocks-components-select__select {
  //       appearance: none;
  //       background: none;
  //       border: 1px solid hsla(0, 0%, 7%, 0.8);
  //       border-radius: 4px;
  //       color: #2b2d2f;
  //       font-family: inherit;
  //       font-size: 1em;
  //       height: 100%;
  //       padding: 1em 0.5em 0;
  //       width: 100%;

  //       &:focus {
  //         border-color: currentColor;
  //         border-width: 1.5px;
  //         outline: 0;
  //       }

  //       &:not([value=""]) {
  //         padding: 1.5em 0.5em 0.5em;
  //       }
  //     }

  //     .wc-blocks-components-select__label {
  //       color: hsla(0, 0%, 7%, 0.7);
  //       font-size: 1em;
  //       left: 0.5625em;
  //       line-height: 1.5;
  //       margin: 0;
  //       max-width: calc(100% - 32px);
  //       overflow: hidden;
  //       position: absolute;
  //       text-overflow: ellipsis;
  //       top: 1.5625em;
  //       transform: translateY(-50%);
  //       transform-origin: top left;
  //       transition: all 0.2s ease;
  //       white-space: nowrap;
  //       z-index: 1;
  //     }

  //     .wc-blocks-components-select__expand {
  //       fill: #2b2d2f;
  //       pointer-events: none;
  //       position: absolute;
  //       right: 12px;
  //       top: 50%;
  //       transform: translateY(-50%);
  //     }

  //     // When select has value, move label up
  //     select:not([value=""]) + .wc-blocks-components-select__label,
  //     select:focus + .wc-blocks-components-select__label {
  //       top: 0;
  //       transform: translateY(4px) scale(0.75);
  //     }
  //   }

  // Checkbox Fields
  &.wc-block-components-checkbox {
    margin-top: 16px;

    &:first-child {
      margin-top: 0;
    }

    label {
      align-items: center;
      display: flex;
      font-size: 1em;
      line-height: 1.5;
      position: relative;

      .wc-block-components-checkbox__input {
        appearance: none;
        background: #fff;
        border: 1px solid hsla(0, 0%, 7%, 0.8);
        border-radius: 4px;
        cursor: pointer;
        height: 1.25em;
        margin: 0 0.75em 0 0;
        min-width: 1.25em;
        position: relative;
        width: 1.25em;

        &:focus {
          border-color: currentColor;
          border-width: 1.5px;
          outline: 0;
        }

        &:checked {
          background-color: #2b2d2f;
          border-color: #2b2d2f;
        }
      }

      .wc-block-components-checkbox__mark {
        display: none;
        fill: #fff;
        height: 0.75em;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 0.75em;

        .wc-block-components-checkbox__input:checked + & {
          display: block;
        }
      }
    }
  }

  // Radio Fields
  &.wc-block-components-radio-control {
    margin-top: 16px;
    border: 1px solid hsla(0, 0%, 7%, 0.11);
    border-radius: 4px;

    &:first-child {
      margin-top: 0;
    }

    .wc-block-components-radio-control__option {
      color: inherit;
      cursor: pointer;
      display: block;
      font-family: inherit;
      font-size: inherit;
      font-style: inherit;
      font-weight: inherit;
      letter-spacing: inherit;
      line-height: inherit;
      margin: 0 0 1em;
      padding: 0 calc(16px + 1.5em) 0 3.5em;
      position: relative;
      text-decoration: inherit;
      text-transform: inherit;
      padding-left: 3.5em !important;
      padding-right: 0.75em !important;
      margin: 0;
      padding-bottom: 1em !important;
      padding-top: 1em !important;
      border-radius: 4px;
      box-sizing: border-box;
      color: #2b2d2f;
      border-bottom: 1px solid hsla(0, 0%, 7%, 0.11);

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

      &:checked {
        border-radius: 4px;
        box-shadow: inset 0 0 0 1.5px currentColor;

        &::after {
          background-color: #2b2d2f;
          border-radius: 50%;
          content: "";
          height: 0.5em;
          left: 50%;
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 0.5em;
        }
      }
    }

    .wc-block-components-radio-control-accordion-option {
      border: 1px solid hsla(0, 0%, 7%, 0.11);
      border-radius: 4px;
      margin-bottom: 8px;

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

      label.wc-block-components-radio-control__option {
        align-items: center;
        cursor: pointer;
        display: flex;
        font-size: 1em;
        line-height: 1.5;
        padding: 1em;
        position: relative;
        width: 100%;
        padding-left: 3.5em !important;
        padding-right: 0.75em !important;
        margin: 0;
        padding-bottom: 1em !important;
        padding-top: 1em !important;

        .wc-block-components-radio-control__input {
          appearance: none;
          background: #fff;
          border: 2px solid hsla(0, 0%, 7%, 0.8);
          border-radius: 50%;
          cursor: pointer;
          height: 1.25em;
          margin: 0 0.75em 0 0;
          min-width: 1.25em;
          position: relative;
          width: 1.25em;

          &:focus {
            border-color: currentColor;
            outline: 0;
          }

          &:checked {
            border-color: #2b2d2f;

            &::after {
              background-color: #2b2d2f;
              border-radius: 50%;
              content: "";
              height: 0.5em;
              left: 50%;
              position: absolute;
              top: 50%;
              transform: translate(-50%, -50%);
              width: 0.5em;
            }
          }
        }
      }
    }
  }

  // Reduced motion support
  @media screen and (prefers-reduced-motion: reduce) {
    &.wc-block-components-text-input label,
    &.wc-block-components-textarea label,
    &.wc-blocks-components-select .wc-blocks-components-select__label {
      transition: none;
    }
  }

  .acfw-field-error {
    color: #e74c3c;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    padding: 1em 0.5em;
    background-color: #e4e4e4;

	&::after,
	&::before {
		content: none !important;
	}
  }
}