@use 'variables' as *;
@use 'mixins';

*,
*::before,
*::after {
  box-sizing: border-box;
}

a {
  color: var(--accent-color);

  &:focus {
    outline: none;
  }

  &:focus-visible {
    outline: $focus-outline;
  }
}

/* stylelint-disable block-opening-brace-space-before */
a[href^='http://'],
a[href^='https://']
{
  cursor: pointer; // Make all web links use pointer cursor
}
/* stylelint-enable block-opening-brace-space-before */

html,
body {
  height: 100%;
  user-select: none;
}

body {
  margin: 0;
  font: 14px/1.5 $sans;
  overflow: hidden;
  -webkit-touch-callout: none;
}

img,
svg {
  vertical-align: middle;
}

b,
strong,
optgroup {
  font-weight: $bold;
}

[contenteditable] {
  user-select: text; // Safari (https://stackoverflow.com/questions/20435166)
}

.app {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.simplenote-app {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
}

.login__draggable-area {
  height: 100px;
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-app-region: drag;
}

.gridicon {
  fill: currentcolor;
}

.search-match {
  background-color: var(--highlight-color);
  border-radius: 3px;
  color: var(--primary-color);
  padding-left: 2px;
  padding-right: 2px;

  &[data-current-match='true'] {
    background-color: var(--search-selection-color);
  }
}

/* stylelint-disable-next-line selector-class-pattern */
.MuiTooltip-tooltip.icon-button__tooltip {
  background-color: var(--tertiary-color);
}
