@use './variables' as *;

.no-user-select {
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

.clickable {
  cursor: pointer;
  user-select: none;
}

.hoverable {
  &:hover,
  &:focus {
    text-decoration: underline;
    text-decoration-skip-ink: all;
    text-decoration-thickness: 2px;
  }
}

.button {
  text-transform: none !important;
}

.primary-button {
  @extend .clickable;
  background-color: $button-primary-background;
  color: $button-primary-color;
  padding: 0.5rem 1rem;

  &:disabled {
    color: rgb(170, 170, 170);
    background-color: rgba(239, 239, 239, 0.3);
    border-color: rgba(118, 118, 118, 0.3);
  }
}

.secondary-button {
  @extend .clickable;
  background-color: $button-secondary-background;
  color: $button-secondary-color;
  padding: 0.5rem 1rem;
}

.wrapped-center {
  margin: 0 auto;
  width: 100%;

  @media screen and (min-width: $screen-breakpoint) {
    max-width: $screen-width;
  }

  @media screen and (min-width: $large-screen-breakpoint) {
    max-width: $large-screen-width;
  }
}

.details {
  > button {
    @extend .clickable;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    transition: background-color 0.5s ease;
    border: solid 1px currentColor;
    border-radius: 26px;

    &.open:hover,
    &.open:focus {
      color: #232323;
    }

    svg {
      height: 1.5em;
      width: 1.5em;
    }
  }

  .close {
    background-color: $main-background-color;
    margin-bottom: 1.75em;
    svg {
      display: none;
    }
  }
}

.slider {
  position: fixed;
  z-index: 10;
  top: 0;
  bottom: 0;
  width: 400px;
  overflow-x: visible;

  @media print {
    & {
      display: none;
    }
  }

  > button {
    @extend .clickable;
    position: absolute;
    top: 0.25rem;
    padding: 0.5rem 0.75rem;
    transition: background-color 0.5s ease;
    border: solid 1px currentColor;
    border-radius: 26px;

    &.open:hover,
    &.open:focus {
      color: #fff;
    }

    svg {
      height: 1.5em;
      vertical-align: bottom;
      width: 1.5em;
    }
  }

  .close {
    background-color: $main-background-color;
    top: 0.5rem;

    svg {
      display: none;
    }
  }

  > div {
    overflow-y: auto;
    height: 100%;

    > header {
      margin-bottom: 1rem;
    }
  }
}

.horizontalMenu {
  display: flex;
  margin-bottom: 1em;

  > li:not(:last-child) {
    margin-right: 0.5em;
  }
}
