Accessibility

<button type='button' (click)='onBackClick($event)'
        [attr.aria-label]="'Vissza az előző oldalra'">
  <i class='icon icon-arrow-left-purple'></i> Vissza
</button>

:host-context(.accessible-theme) & {
    @include highcontrast;
    @include highcontrastBorder(3px);
  }

@mixin highcontrast {
  background-color: var(--mtvaui-accessible-bg) !important;
  background: var(--mtvaui-accessible-bg) !important;
  color: var(--mtvaui-accessible-fg) !important;
  &::ng-deep {
    background-color: var(--mtvaui-accessible-bg) !important;
    background: var(--mtvaui-accessible-bg) !important;
    color: var(--mtvaui-accessible-fg) !important;
  }
}

@mixin highcontrastBorder($borderSize: 2px, $borderStyle: solid) {
  &,
  &::ng-deep {
    border-style: $borderStyle;
    @if ($borderSize) {
      border-width: $borderSize !important;
    }

    border-color: var(--mtvaui-accessible-fg) !important;
  }
}

/**
* @tokens Colors / Accessibility
* @presenter Color
*/
  --mtvaui-accessible-fg: #{$accessible-fg};
  --mtvaui-accessible-bg: #{$accessible-bg};

$accessible-bg: $black;
$accessible-fg: $yellow;