@import '../../../mixins/focus-state';

:host {
  display: block;
  width: 96px;
  height: 96px;

  ::slotted(a),
  ::slotted(button) {
    all: unset;
    box-sizing: border-box;
    border-right: 1px solid var(--tds-nav-item-border-color);
    width: 100%;
    height: 100%;
    border: none;
    padding: 0 12px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    font: var(--tds-detail-05);
    letter-spacing: var(--tds-detail-05-ls);
    background-color: var(--tds-header-app-launcher-menu-bg);
    color: var(--tds-header-app-launcher-grid-color);
    border-radius: 4px;
    transition: background-color 150ms ease;
  }

  ::slotted(a:hover),
  ::slotted(button:hover) {
    background-color: var(--tds-header-app-launcher-grid-hover-background);
    cursor: pointer;
  }

  ::slotted(a:focus-visible),
  ::slotted(button:focus-visible) {
    @include tds-focus-state;
  }
}