@use "_variables" as *;
@use "_mixins" as *;

.sub-menu-entry {
  border: 0;
  padding: 0;
  opacity: 0.7;
  color: pvar(--fg);
  display: inline-block;
  font-weight: $font-semibold;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  font-size: 1rem;

  @include disable-default-a-behaviour;
  @include margin-right(55px);

  &.active {
    border-bottom-color: pvar(--border-primary);
  }

  &:hover,
  &:active,
  &:focus {
    color: pvar(--fg);
  }

  &.active,
  &:hover,
  &:active,
  &:focus {
    opacity: 1;
    outline: 0 hidden !important;
  }

  @media screen and (max-width: $mobile-view) {
    @include margin-left(15px);
  }
}

.title-page {
  margin-bottom: 1.5rem;
  color: pvar(--fg-400);

  @include font-size(2rem);

  my-global-icon {
    @include global-icon-size(28px);
    @include margin-right(0.5rem);
  }
}

.pt-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-bottom: 1rem;
  list-style: none;
  font-weight: $font-semibold;

  .breadcrumb-item {
    display: flex;

    &,
    a {
      color: pvar(--fg-400);
    }

    a:hover {
      color: pvar(--fg-300);
    }

    + .breadcrumb-item {
      @include padding-left(0.5rem);

      &::before {
        display: inline-block;
        content: "/";

        @include padding-right(0.5rem);
      }
    }
  }
}
