.icon--prodigy-logo {
  @include icon--prodigy-logo;
  width: 148px;
  height: 41px;
}

//.icon-- classes
.icon--arrow-down-orange {
  @include icon--arrow-down-orange;
}

.icon--arrow-up-boxed-grey {
  @include icon--arrow-up-boxed-grey;
}

.icon--arrow-up-boxed-orange {
  @include icon--arrow-up-boxed-orange;
}

.icon--arrow-up-orange {
  @include icon--arrow-up-orange;
}

.icon--bin-darkgrey {
  @include icon--bin-darkgrey;
}

.icon--blog-circle-white {
  @include icon--blog-circle-white;
}

.icon--cloud-download-blue {
  @include icon--cloud-download-blue;
}

.icon--doc-grey {
  @include icon--doc-grey;
}

.icon--doc-orange {
  @include icon--doc-orange;
}

.icon--down-blue {
  @include icon--down-blue;
}

.icon--down-grey {
  @include icon--down-grey;
}

.icon--down-orange {
  @include icon--down-orange;
}

.icon--down-white {
  @include icon--down-white;
}

.icon--edit-darkgrey {
  @include icon--edit-darkgrey;
}

.icon--email-white {
  @include icon--email-white;
}

.icon--exclamation-white {
  @include icon--exclamation-white;
}

.icon--facebook-circle-white {
  @include icon--facebook-circle-white;
}

.icon--facebook-darkgrey {
  @include icon--facebook-darkgrey;
}

.icon--facebook-white {
  @include icon--facebook-white;
}

.icon--googleplus-darkgrey {
  @include icon--googleplus-darkgrey;
}

.icon--googleplus-white {
  @include icon--googleplus-white;
}

.icon--hamburger-blue {
  @include icon--hamburger-blue;
}

.icon--hamburger-grey {
  @include icon--hamburger-grey;
}

.icon--hamburger-white {
  @include icon--hamburger-white;
}

.icon--help-circ-blue {
  @include icon--help-circ-blue;
}

.icon--help-circ-grey {
  @include icon--help-circ-grey;
}

.icon--info-circle-blue {
  @include icon--info-circle-blue;
}

.icon--instagram-darkgrey {
  @include icon--instagram-darkgrey;
}

.icon--instagram-white {
  @include icon--instagram-white;
}

.icon--left-black {
  @include icon--left-black;
}

.icon--left-grey {
  @include icon--left-grey;
}

.icon--left-white {
  @include icon--left-white;
}

.icon--left-blue {
  @include icon--left-blue;
}

.icon--linkedin-circle-white {
  @include icon--linkedin-circle-white;
}

.icon--linkedin-darkgrey {
  @include icon--linkedin-darkgrey;
}

.icon--linkedin-white {
  @include icon--linkedin-white;
}

.icon--lock-blue {
  @include icon--lock-blue;
}

.icon--lock-grey {
  @include icon--lock-grey;
}

.icon--play-white {
  @include icon--play-white;
}

.icon--profile-grey {
  @include icon--profile-grey;
}

.icon--profile-placeholder {
  @include icon--profile-placeholder;
}

.icon--right-black {
  @include icon--right-black;
}

.icon--right-grey {
  @include icon--right-grey;
}

.icon--right-white {
  @include icon--right-white;
}

.icon--right-blue {
  @include icon--right-blue;
}

.icon--search-black {
  @include icon--search-black;
}

.icon--search-white {
  @include icon--search-white;
}

.icon--signout-grey {
  @include icon--signout-grey;
}

.icon--sort-grey {
  @include icon--sort-grey;
}

.icon--sort-orange {
  @include icon--sort-orange;
}

.icon--star-boxed-grey {
  @include icon--star-boxed-grey;
}

.icon--star-boxed-orange {
  @include icon--star-boxed-orange;
}

.icon--tick-blue {
  @include icon--tick-blue;
}

.icon--tick-box-dark {
  @include icon--tick-box-dark;
}

.icon--tick-box-disabled {
  @include icon--tick-box-disabled;
}

.icon--tick-green {
  @include icon--tick-green;
}

.icon--twitter-circle-white {
  @include icon--twitter-circle-white;
}

.icon--twitter-darkgrey {
  @include icon--twitter-darkgrey;
}

.icon--twitter-white {
  @include icon--twitter-white;
}

.icon--up-grey {
  @include icon--up-grey;
}

.icon--x-darkblue {
  @include icon--x-darkblue;
}

.icon--x-darkgreen {
  @include icon--x-darkgreen;
}

.icon--x-darkgrey {
  @include icon--x-darkgrey;
}

.icon--x-darkorange {
  @include icon--x-darkorange;
}

.icon--x-darkred {
  @include icon--x-darkred;
}

.icon--x-grey {
  @include icon--x-grey;
}

.icon--x-orange {
  @include icon--x-orange;
}

.icon--x-white {
  @include icon--x-white;
}

.icon--youtube-darkgrey {
  @include icon--youtube-darkgrey;
}

.icon--youtube-white {
  @include icon--youtube-white;
}

//\.icon-- classes

// modal icons
.modal__close {
  &:hover {
    @include icon--x-orange;
  }
}

// notice icons
.notice__close {
  border-color: transparent;
  background-color: transparent;
  width: 20px;
  height: 20px;

  &--default {
    @include icon--x-darkgrey;

    &:hover {
      background-color: $colour-grey-xlight;
    }
  }

  &--info {
    @include icon--x-darkblue;

    &:hover {
      background-color: rgba($notice-info-border-colour, 0.5);
    }
  }

  &--success {
    @include icon--x-darkgreen;

    &:hover {
      background-color: rgba($notice-success-border-colour, 0.2);
    }
  }

  &--error {
    @include icon--x-darkred;

    &:hover {
      background-color: rgba($notice-error-border-colour, 0.2);
    }
  }
}

// state icons
.is-locked {
  display: block;
  position: relative;
}

.is-locked::after {
  @include icon--lock-blue;
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  background-position: center;
}

.text-success.is-valid::after {
  @include icon--tick-green;
  width: 9px;
  height: 7px;
}

.text-error.is-invalid::after {
  @include icon--x-darkred;
  background-size: cover;
  width: 7px;
  height: 7px;
}

// info/help icon
.has-info {
  @include icon--help-circ-blue;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  padding-right: 20px;

  @at-root input#{&} {
    width: 100%;
    height: $form-field-height;
  }
}


.input-group__add-on.has-info {
  width: auto;
}

// accordion icons
.accordion__icon {
  @include icon--up-grey;
}

.is-collapsed .accordion__icon {
  @include icon--down-orange;
}

.is-collapsed .icon--up-grey {
  @include icon--down-grey;
}

// app icons hover versions
.icon--doc-hover {
  @include icon--doc-grey;

  :hover & {
    @include icon--doc-orange;
  }
}

.icon--star-boxed-hover {
  @include icon--star-boxed-grey;

  :hover & {
    @include icon--star-boxed-orange;
  }
}

.icon--arrow-up-boxed-hover {
  @include icon--arrow-up-boxed-grey;

  :hover & {
    @include icon--arrow-up-boxed-orange;
  }
}

// form related icons
.input-checkbox {
  &.is-checked label::after,
  [type="checkbox"]:checked + label::after {
    @include icon--tick-box-dark;
    width: 1.133333em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: contain;
  }

  [type="checkbox"][disabled]:checked + label::after,
  [type="checkbox"][readonly]:checked + label::after {
    @include icon--tick-box-disabled;
  }
}

.enhanced-select__label {
  @include icon--down-grey;
}

.input-text--search {
  @include icon--search-black;
  background-size: $search-form-icon-size auto;
}

.enhanced-select__label,
.input-text--search {
  width: 100%;
  background-repeat: no-repeat;
  background-position: 98% 50%;
}

.btn-group__toggle {
  input:checked + label::before {
    background-image: none;
    width: auto;
    height: auto;
  }
}

.accordion__toggle--chrome::before {
  @include icon--up-grey;
  width: $accordion-chrome-icon-size;
  height: $accordion-chrome-icon-size;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.is-collapsed .accordion__toggle--chrome::before {
  @include icon--down-grey;
}

.icon--down-hover-blue {
  *:hover &,
  &:hover,
  *:focus &,
  &:focus {
    @include icon--down-blue;
  }
}

.pill__action {
  width: 0.73em;
  height: 0.73em;
}

.carousel__prev-next {
  height: $carousel-prev-next-size;
  width: $carousel-prev-next-size;
}

.video__play {
  width: $video-play-size;
  height: $video-play-size;
}

.video__close {
  width: $video-close-size;
  height: $video-close-size;
}