:root {
  --tile-width: var(--size-316);
  --tile-height: var(--size-60);
  --tile-padding: var(--space-2) var(--space-3);
  --tile-gap: var(--space-3);
  --tile-radius: var(--radius-8);
  --tile-border: var(--border-1) solid var(--color-border-strong);
  --tile-background: var(--color-surface);
  --tile-hover-background: var(--color-neutral-hover);
  --tile-foreground: var(--color-surface-foreground);
  --tile-font: var(--font-type-label);
  --tile-focus-outline: var(--focus-width) solid var(--color-focus-ring);
}

.tile {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--tile-gap);
  inline-size: var(--tile-width);
  max-inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--tile-height);
  padding: var(--tile-padding);
  border: var(--tile-border);
  border-radius: var(--tile-radius);
  background: var(--tile-background);
  color: var(--tile-foreground);
  font: var(--tile-font);
  text-decoration: none;
  text-align: start;
}

.tile__icon {
  display: flex;
  flex: none;
}

.tile__label {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.tile:hover {
  background: var(--tile-hover-background);
}

.tile:focus-visible {
  outline: var(--tile-focus-outline);
  outline-offset: var(--focus-offset);
}