@mixin primary-accessible-behavior {
  &:hover {
    color: var(--primary-color-hover);
  }
  &:focus {
    color: var(--primary-color-focus);
  }
}

@mixin secondary-accessible-behavior {
  &:hover {
    color: var(--secondary-color-hover);
  }
  &:focus {
    color: var(--secondary-color-focus);
  }
}

@mixin accessible-border-behavior {
  border: var(--border);

  &:hover, &:focus {
    outline: none;
  }

  &:not(li):hover {
    border: var(--border-size) solid var(--grey-color-dark);
  }

  li {
    &:hover {
      background-color: var(--grey-color-light);
      &:first-child {
        border-bottom: solid 1px var(--grey-color-dark);
        border-radius: var(--border-radius) var(--border-radius) 0 0;

        + li {
          border-top: solid 1px var(--grey-color-dark);
        }
      }

      &:not(:first-child):not(:last-child) {
        border-top: solid 2px var(--grey-color-dark);
        border-bottom: solid 1px var(--grey-color-dark);
        margin-top: -1px;

        + li {
          border-top: solid 1px var(--grey-color-dark);
        }
      }

      &:last-child {
        border-top: solid 2px var(--grey-color-dark);
        margin-top: -1px;
        border-radius: 0 0 var(--border-radius) var(--border-radius);
      }
    }
  }

  outline-color: var(--grey-color-dark);
}

@mixin input-label {
  display: grid;
  width: fit-content;
  grid-template-rows: 100%;
  grid-template-columns: 1fr 9fr;
  align-items: center;
  cursor: pointer;

  span:first-child {
    user-select: none;
    grid-column: 2;
    grid-row: 1;
  }

  input {
    grid-column: 1;
    grid-row: 1;

    + span, + svg {
      grid-column: 1;
      grid-row: 1;
    }
  }
}

@mixin mask {
  background: rgba(0,0,0,.1);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  touch-action: none;
}