::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: $boulder-400;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: $boulder-400;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: $boulder-400;
}

.disabled {
  ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: $nobel-300;
  }

  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: $nobel-300;
  }

  ::-ms-input-placeholder { /* Microsoft Edge */
    color: $nobel-300;
  }
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

.input-num {
  position: relative;
  display: flex;

  input {
    width: 100%;
  }

  &-inc {
    position: absolute;
    top: 8px;
    right: $base-spacing-3-4th;
    margin-left: $base-spacing-3-4th;
    cursor: pointer;
  }

  &-dec {
    position: absolute;
    bottom: 8px;
    right: $base-spacing-3-4th;
    margin-left: $base-spacing-3-4th;
    cursor: pointer;
  }
}

.checkboxes {
  margin-top: $base-spacing-3-4th;
  display: flex !important;
  position: relative;

  .checkbox {
    margin-right: $base-spacing-half;
  }

  input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 16px;
    width: 16px;
  }

  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    background-color: $base-white;
    border: 1px solid $boulder-400;
    border-radius: 2px;

    &:hover {
      border-color: $sky-blue-500;
    }

    &::after {
      content: "";
      position: absolute;
      display: none;
    }
  }

  input:checked ~ .checkmark {
    background: $sky-blue-500;
    border-color: $sky-blue-500;

    &::after {
      display: block;
    }
  }
}

.radios {
  margin-top: $base-spacing-3-4th;
  display: flex !important;
  position: relative;

  .radio {
    margin-right: $base-spacing-half;
  }

  input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 16px;
    width: 16px;
  }

  .dot {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid $sky-blue-500;
    width: 16px;
    height: 16px;
    border-radius: 50%;

    &::after {
      content: '.';
      position: absolute;
      top: 2px;
      left: 2px;
      border-radius: 50%;
      background: $sky-blue-500;
      width: 12px;
      height: 12px;
      display: none;
    }
  }

  input:checked ~ .dot {
    border-color: $sky-blue-500;

    &::after {
      display: block;
    }
  }
}