@import '../../../@theme/styles/themes';
@import '~@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {
  $menu-item-fg: nb-theme(color-fg-heading-light);
  $menu-item-fg-active: nb-theme(header-menu-fg-active);

  :host {
    display: flex;
    align-items: center;
    padding-right: 32px;
  }

  a {
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.5rem;
    padding: 0.675rem 1.375rem;
    color: $menu-item-fg;
    display: block;

    &:hover, &.active, &:focus {
      color: $menu-item-fg-active;
      outline: none !important;
    }
  }
}

.material-theme-popover {
  margin: 0;
  padding: 1rem 2rem;
  color: #ff4d6b;
  font-weight: 600;
  font-size: 1.1rem;
}