:host {
  display: flex;
  flex-flow: column nowrap;
  gap: 2px;

  & > div {
    display: inline-flex;
    justify-content: space-between;

    margin-right: 9px;
    padding: 4px 10px;

    font-size: 11pt;
    color: var(--color-gray-444);

    border-radius: 5px;

    & > a,
    & > a:visited,
    & > a:hover,
    & > a:focus,
    & > a:focus-visible {
      cursor: default;
      color: var(--color-gray-444);
    }

    &.header {
      font-size: 12pt;
      color: var(--color-gray-888);
      text-transform: uppercase;
    }

    &.menu-item {
      cursor: pointer;

      &.active {
        background-color: var(--color-gray-ddd);
      }

      &:hover {
        opacity: 0.8;
      }

      & > a,
      & > a:visited,
      & > a:hover,
      & > a:focus,
      & > a:focus-visible {
        cursor: pointer;
      }
    }

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}