.ui-toggle {
  position: relative;

  overflow: hidden;

  font-family: $ui-font-specter-regular;

  background: ui-color(natural);
  border: 1px solid ui-color(blue);
  outline: none;

  cursor: pointer;

  transition: background $ui-duration-medium ease,
    border-color $ui-duration-medium ease;

  appearance: none;

  &--pre-selected::after,
  &--selected::after,
  &--success::after {
    position: absolute;
    top: 0;
    right: 0;

    width: 24px;
    height: 24px;

    background: ui-color(blue);

    content: '';
  }

  &--pre-selected::before,
  &--selected::before,
  &--success::before {
    @include ui-icon--checkmark;
    position: absolute;
    top: 0;
    right: 3px;
    z-index: 1;

    width: 16px;

    color: ui-color(white);

    font-size: $ui-icon-dogear-size; // Bespoke
    line-height: 24px;
    text-align: center;
  }

  &__icon path {
    transition: fill $ui-duration-medium ease;
  }

  &--white {
    background: ui-color(white);
  }

  &:hover {
    box-shadow: inset 0 0 0 1px ui-color(blue);
  }

  &:focus {
    outline: Highlight auto;
    outline: -webkit-focus-ring-color auto;
    box-shadow: none !important;
  }

  &--primary-light {
    background: ui-color(white);
  }

  &--pre-selected {
    border-color: ui-color(paper-ink-lightest);
  }

  &--selected,
  &--success,
  &--error,
  &:active {
    border-color: ui-color(blue);
    box-shadow: inset 0 0 0 1px ui-color(blue);

    .ui-icon {
      color: ui-color(blue);
    }
    .ui-toggle__icon path {
      fill: ui-color(blue);
    }
  }

  &--success,
  &--success:hover {
    border-color: ui-color(green-medium);

    .ui-icon {
      color: ui-color(green-medium);
    }
    .ui-toggle__icon path {
      fill: ui-color(green-medium);
    }
  }

  &--error,
  &--error:hover {
    border-color: ui-color(red-medium);

    .ui-icon {
      color: ui-color(red-medium);
    }
    .ui-toggle__icon path {
      fill: ui-color(red-medium);
    }
  }

  &--pre-selected::after {
    background: ui-color(paper-ink-lightest);
    border-color: ui-color(paper-ink-lightest);
  }
  &--success::after {
    background: ui-color(green-medium);
  }
  &--error::after {
    background: ui-color(red-medium);
  }

  &__icon path {
    fill: ui-color(paper-ink-dark);
  }
}