@use 'variables';

.parent__menu {
  position: relative;

  @media (hover: hover) {
    &:hover > .submenu {
      display: block;
    }
  }

  &:focus > .submenu {
    display: block;
  }
  
  & .submenu-active {
    display: block;
  }

  @media screen and (min-width: variables.$breakpoint) {
    &::after {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 25px;
      background: rgba(0,0,0,0.001);
    }
  }
}

.submenu {
  display: none;

  &:focus {
    display: block;
  }
  
  @media screen and (min-width: variables.$breakpoint) {
    position: absolute;
    top: 60px;
    width: max-content;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 0.2rem;

    &::before {
      display: inline-block;
      content: "";
      vertical-align: middle;
      border-right: 10px solid transparent;
      border-bottom: 10px solid rgba(255, 255, 255, 0.95);
      border-left: 10px solid transparent;
      position: absolute;
      top: -10px;
      left: 1rem;
    }
  }

  &__item {
    margin-left: 1rem;
    padding: 0.5rem;
    position: relative;

    & a {
      border-bottom: 2px solid transparent;
    }

    @media screen and (min-width: variables.$breakpoint) {
      margin: 0;
    }
  }
}