[data-app-icon] {
  color: var(--os-ink);
}

[data-icon] {
  align-items: center;
  background: var(--os-surface);
  border: 1px solid var(--os-surface-highlight);
  box-shadow: 4px 4px 0 var(--os-shadow);
  color: inherit;
  display: inline-flex;
  height: 46px;
  justify-content: center;
  position: relative;
  width: 46px;
}

[data-icon] svg {
  display: block;
  height: 32px;
  width: 32px;
}

[data-app-icon][data-selected='true'] [data-icon] {
  background-color: var(--os-accent);
  box-shadow: 4px 4px 0 var(--os-shadow);
}

[data-app-icon][data-selected='true'] {
  color: var(--os-ink);
}

[data-app-icon]:focus-visible {
  outline: var(--os-focus-width) solid var(--os-accent-bright);
  outline-offset: 2px;
}