.q-context {
  &-menu {
    min-width: 150px;
    overflow: hidden;
    background-color: var(--color-tertiary-gray-light);
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-primary);

    &__icon {
      margin-right: 16px;
      font-size: 24px;
    }

    &__item {
      position: relative;
      display: flex;
      width: 100%;
      padding: 12px 24px;
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-base);
      line-height: 24px;
      color: var(--color-primary-blue);
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
      background-color: var(--color-tertiary-gray-light);
      border: none;

      &_with-icon {
        padding-right: 50px;
        padding-left: 24px;
      }

      &:not(:first-child) {
        margin-top: 1px;
      }

      &:hover,
      &:focus {
        position: relative;
        z-index: 1;
        color: var(--color-primary-black);
        background-color: var(--color-tertiary-gray);
        outline: none;
      }

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        content: '';
        box-shadow: -1px -1px 3px rgb(var(--color-rgb-white) / 25%),
          1px 1px 3px rgb(var(--color-rgb-blue) / 40%);
      }
    }
  }

  &-trigger {
    display: inline-block;

    &__button {
      display: block;
      width: 40px;
      height: 40px;
      padding: 0;
      font-size: 24px;
      color: var(--color-primary-blue);
      cursor: pointer;
      background-color: transparent;
      border: none;
      border-radius: 100%;
      outline: none;

      &:hover,
      &[data-focus-visible-added] {
        color: var(--color-primary-black);
        background-color: rgb(var(--color-rgb-gray) / 16%);
      }
    }
  }
}
