@import '../shared-styles/index';

:host(.nx-footer) {
  @include type-style(footer);
  color: v(footer-color);
  display: flex;
  flex-direction: row;
  background: transparent;
  padding: v(footer-padding-top) $grid-gutter-width-base v(footer-padding-bottom)
    $grid-gutter-width-base;

  @include media-breakpoint-response(mobile) {
    flex-direction: column-reverse;
    padding: v(footer-mobile-padding-top) $grid-gutter-width-mobile v(footer-mobile-padding-bottom)
      $grid-gutter-width-mobile;
  }
}

::ng-deep a {
  text-decoration: none;
}

::ng-deep .nx-footer__copyright {
  font-weight: v(footer-copyright-font-weight);
  align-self: flex-end;
  font-size: inherit;
  line-height: inherit;
  color: inherit;

  @include media-breakpoint-response(mobile) {
    align-self: center;
    text-align: center;
  }
}

::ng-deep .nx-footer__navigation {
  display: flex;
  align-self: flex-end;

  @include media-breakpoint-response(mobile) {
    text-align: center;
    align-self: center;
    flex-direction: column;
    align-items: center;
  }

  & .nx-footer__link {
    @include media-breakpoint-response(mobile) {
      padding-left: 0;
      padding-bottom: nx-spacer(s);

      :host-context([dir='rtl']) & {
        padding-right: 0;
      }
    }
  }
}

::ng-deep .nx-footer__link {
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  padding-left: nx-spacer(2m);

  :host-context([dir='rtl']) & {
    padding-right: nx-spacer(2m);
    padding-left: initial;
  }

  a {
    display: flex; // get icons aligned with text
    align-items: flex-start; // align with the top
  }

  &.cdk-keyboard-focused a {
    border-radius: nx-border-radius(s);
    @include focus-style;
  }
}
