:root.ion-mode-desktop,
.ion-mode-desktop {
  --lbrowe-ion-desktop-focus: #2563eb;
  --lbrowe-ion-desktop-hover: rgba(15, 23, 42, 0.08);
  --lbrowe-ion-desktop-radius: 4px;
}

@media (hover: hover) and (pointer: fine) {
  :root,
  .ion-mode-desktop {
    --lbrowe-ion-desktop-focus: #2563eb;
    --lbrowe-ion-desktop-hover: rgba(15, 23, 42, 0.08);
    --lbrowe-ion-desktop-radius: 4px;
  }
}

:root.ion-mode-desktop ion-button,
.ion-mode-desktop ion-button {
  --border-radius: var(--lbrowe-ion-desktop-radius);
  --padding-start: 12px;
  --padding-end: 12px;
  min-height: 32px;
}

@media (hover: hover) and (pointer: fine) {
  ion-button {
  --border-radius: var(--lbrowe-ion-desktop-radius);
  --padding-start: 12px;
  --padding-end: 12px;
  min-height: 32px;
  }
}

:root.ion-mode-desktop ion-item,
.ion-mode-desktop ion-item {
  --min-height: 32px;
  --padding-start: 10px;
  --inner-padding-end: 10px;
}

:root.ion-mode-desktop ion-toolbar,
.ion-mode-desktop ion-toolbar {
  --min-height: 40px;
  --padding-start: 8px;
  --padding-end: 8px;
}

:root.ion-mode-desktop ion-chip,
.ion-mode-desktop ion-chip,
:root.ion-mode-desktop ion-segment-button,
.ion-mode-desktop ion-segment-button,
:root.ion-mode-desktop ion-tab-button,
.ion-mode-desktop ion-tab-button {
  min-height: 32px;
}

:root.ion-mode-desktop ion-input,
.ion-mode-desktop ion-input,
:root.ion-mode-desktop ion-searchbar,
.ion-mode-desktop ion-searchbar,
:root.ion-mode-desktop ion-select,
.ion-mode-desktop ion-select,
:root.ion-mode-desktop ion-textarea,
.ion-mode-desktop ion-textarea {
  --border-radius: var(--lbrowe-ion-desktop-radius);
}

@media (hover: hover) and (pointer: fine) {
  ion-item:hover,
  ion-button:hover,
  ion-chip:hover,
  ion-tab-button:hover,
  ion-segment-button:hover,
  ion-menu-toggle:hover,
  ion-router-link:hover {
    --background-hover: var(--lbrowe-ion-desktop-hover);
    --background-hover-opacity: 1;
  }
}

:root.ion-mode-desktop ion-button:focus-visible,
.ion-mode-desktop ion-button:focus-visible,
:root.ion-mode-desktop ion-item:focus-visible,
.ion-mode-desktop ion-item:focus-visible,
:root.ion-mode-desktop ion-chip:focus-visible,
.ion-mode-desktop ion-chip:focus-visible,
:root.ion-mode-desktop ion-tab-button:focus-visible,
.ion-mode-desktop ion-tab-button:focus-visible,
:root.ion-mode-desktop ion-segment-button:focus-visible,
.ion-mode-desktop ion-segment-button:focus-visible,
:root.ion-mode-desktop ion-router-link:focus-visible,
.ion-mode-desktop ion-router-link:focus-visible {
  outline: 2px solid var(--lbrowe-ion-desktop-focus);
  outline-offset: 2px;
}