/* =============================================================================
   Shortcuts
   ========================================================================== */

@media (hover: hover) {
  .shortcuts__link:hover {
    background: rgb(var(--c-primary-dark));
  }
}

@media (hover: hover) and (min-width: 901px) {
  .shortcuts .shortcuts__item a.shortcuts__link::after {
    content: attr(data-title);
    display: block;
    margin: 0;
    font-family: var(--f-family);
    font-weight: var(--f-weight-n);
    vertical-align: baseline;
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    padding: 6px 12px;
    font-size: 15px;
    line-height: 1.4;
    white-space: nowrap;
    color: rgb(var(--c-neutral-lightest));
    background: rgb(0, 0, 0);
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity 0.15s ease;
  }

  .shortcuts__link::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border: 5px solid transparent;
    border-left-color: rgb(0, 0, 0);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }

  .shortcuts .shortcuts__item a.shortcuts__link:hover::after,
  .shortcuts__link:hover::before {
    opacity: 0.9;
  }

  .shortcuts .shortcuts__item a.shortcuts__link:is(.golf, .schule, .gastro)::after {
    background: rgb(var(--c-neutral-darker));
  }

  .shortcuts__link:is(.golf, .schule, .gastro)::before {
    border-left-color: rgb(var(--c-neutral-darker));
  }
}