/* Basic styles for forms
   ========================================================================== */

[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled) {
  cursor: pointer;
}

.wp-core-ui {

  input[type="checkbox"],
  input[type="radio"] { display: none; }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input[type="number"],
  input[type="url"],
  input[type="tel"],
  textarea,
  select
  {
    @include default-input-form;

    &:hover {
      @include hover-input-form;
    }

    &:focus {
      @include focus-input-form;
    }
  }

  input,
  select {
    -webkit-appearance: none;
    appearance: none;
  }

  select {
    min-width: 100px;
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    background: #fff url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat right 5px top 55%;
  }

  textarea {
    display: block;
    height: initial;
    resize: none;
    box-shadow: none;
    -webkit-appearance: none;
  }

  input.woocs__max-width,
  select.woocs__max-width {
    max-width: 250px;

    &:not(:last-child) {
      margin-bottom: 1rem;
    }
  }

}

/* Custom Checkbox */

.woocs-switcher {
  display: none;

  &:checked {
    + .woocs-toggle-switcher {

      &:before { background-color: #c8e1ff; }

      span {
        background: #79b8ff;
        transform: translateX(20px);
        transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
        box-shadow: 0 3px 8px rgba(79, 46, 220, 0.2);

        &:before {
          transform: scale(1);
          opacity: 0;
          transition: all 0.4s ease;
        }
      }
    }
  }
}

.woocs-toggle-switcher {
  position: relative;
  display: block;
  width: 40px;
  height: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(0, 0, 0);

  &:before {
    content: "";
    position: relative;
    top: 3px;
    left: 3px;
    width: 34px;
    height: 14px;
    display: block;
    background: #9A9999;
    border-radius: 8px;
    transition: background 0.2s ease;
  }

  span {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    display: block;
    background: white;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(154, 153, 153, 0.5);
    transition: all 0.2s ease;

    &:before {
      content: "";
      position: absolute;
      display: block;
      margin: -18px;
      width: 56px;
      height: 56px;
      background: rgba(79, 46, 220, 0.5);
      border-radius: 50%;
      transform: scale(0);
      opacity: 1;
      pointer-events: none;
    }
  }

}

/* Custom Radio Button */

.woocs-checkmark-label {
  position: relative;

  input:checked {

    ~ .woocs-checkmark {
      &:after {
        visibility: visible;
        opacity: 1;
      }
    }

  }

  .woocs-checkmark {
    position: relative;
    display: inline-block;
    width: 21px;
    height: 21px;
    border: 1px solid #79b8ff;
    background-color: #fff;
    color: #50575e;
    cursor: pointer;
    border-radius: 50%;

    &:after {
      position: absolute;
      left: 3px;
      right: 3px;
      top: 3px;
      bottom: 3px;
      border-radius: 50%;
      background-color: #79b8ff;
      visibility: hidden;
      opacity: 0;
      transition: opacity .25s ease;
      content: "";
    }
  }

}