@use 'sass:map';
@use '../../scss/palette' as palette;
@use '../../scss/breakpoints' as breakpoints;

.pop-menu__pop-over {
  width: 20.875rem;
  padding: 0;

  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
    width: 26.125rem;
    max-width: 27rem;
  }

  ul {
    width: calc(100% - 0.5px);
  }

  li:first-of-type {
    border-top: none;

    a,
    button {
      border-top-left-radius: 9px;
      border-top-right-radius: 9px;
    }
  }

  li:last-of-type {
    border-bottom: none;

    a,
    button {
      border-bottom-left-radius: 9px;
      border-bottom-right-radius: 9px;
    }
  }
}