.select,
.text-input {
  background-color: $white !important;
  padding: 1.2rem 1.8rem !important;
  border: $border !important;

  &:focus {
    @include outline;
  }
}

.select {
  background-image: svg-url($arrow-down) !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 1.5rem) center !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  border-radius: 0 !important;
  padding-right: 4rem !important;
}

.check {
  @include screen-reader-only;
  position: fixed !important;

  + span {
    cursor: pointer !important;
    align-items: center !important;
    line-height: map-get($spacing, 5) !important;
    display: block !important;

    &:before {
      content: '' !important;
      display: inline-block !important;
      vertical-align: middle !important;
      width: $text-3 !important;
      height: $text-3 !important;
      margin-right: map-get($spacing, 3) !important;
      position: relative !important;
      background-color: $white !important;
      border: $border !important;
    }

    &:before {
      border-radius: 5px !important;
    }
  }

  &:checked + span:before {
    background-image: svg-url($tick) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  &:focus + span:before {
    @include outline-border;
  }
}

.checkbutton {
  @include screen-reader-only;
  position: fixed !important;

  + span {
    border: 2px solid transparent !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    padding: map-get($spacing, 3) 0 !important;
  }

  &:not(:checked) + span {
    background-color: $gray-light !important;
  }

  &:focus + span {
    @include outline-border;
  }

  &:checked + span {
    color: $white !important;
  }
}

.checktoken {
  background-image: svg-url($close) !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 2rem) center !important;
  background-color: $gray-light !important;
  border-radius: 100px !important;
  cursor: pointer !important;
  display: flex !important;
  font-weight: bold !important;
  padding: map-get($spacing, 2) map-get($spacing, 4) !important;
}