.button--plain {
  border-color: transparent;
  color: returnColorCSSVar('brand-primary');

  &:hover,
  &:focus {
    background: returnColorCSSVar('brand-primary-alpha-10');
    border-color: transparent;
    color: returnColorCSSVar('brand-primary');

    .icon svg {
      fill: returnColorCSSVar('brand-primary');
    }
  }

  @include hover-touch {
    color: returnColorCSSVar('brand-primary');
    background: returnColorCSSVar('brand-primary-alpha-30');
  }

  // off-white
  &.button--off-white {
    color: $color-brand--four;

    &:hover,
    &:focus {
      background: $color-alpha--four-30;
      border-color: transparent;
      color: $color-brand--four;

      .icon svg {
        fill: $color-brand--four;
      }
    }

    @include hover-touch {
      background: $color-alpha--four-50;
      color: $color-brand--four;
    }
  }

  // white
  &.button--white {
    color: $color-brand--white;

    &:hover,
    &:focus {
      background: $color-brand--white;
      border-color: transparent;
      color: $color-brand--two;

      .icon svg {
        fill: $color-brand--two;
      }
    }

    @include hover-touch {
      background: $color--grey;
      color: $color-brand--two;
    }
  }

  // dark blue
  &.button--dark-blue {
    color: returnColorCSSVar('brand-secondary');

    &:hover,
    &:focus {
      background: returnColorCSSVar('brand-secondary-alpha-10');

      .icon svg {
        fill: returnColorCSSVar('brand-secondary');
      }
    }

    @include hover-touch {
      background: returnColorCSSVar('brand-secondary-alpha-30');

      .icon svg {
        fill: returnColorCSSVar('brand-secondary');
      }
    }
  }

  // dark blue 180
  &.button--dark-blue-180 {
    color: $color--two-180;

    &:hover,
    &:focus {
      background: $color--two-180;
      border-color: transparent;
      color: $color-brand--white;

      .icon svg {
        fill: $color-brand--white;
      }
    }

    @include hover-touch {
      background: $color--two-80;
      color: $color-brand--white;
    }
  }

  // ! Deprecation warning, do not use anymore. Will be removed in a later release use bg-variants function instead.
  .bg-brand--blue &,
  .bg-brand--dark-blue &,
  .bg-brand--turquoise &,
  .bg-brand--off-white &,
  .bg-brand--red &,
  .bg-brand--yellow & {
    border: transparent;
  }
}

.button--plain {
  @include bg-variants {
    @include button-plain-bg-map;
  }
}