seasoned/src/scss/main.scss

@import "scss/variables";

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently */
}

* {
  box-sizing: border-box;
}

html {
  height: unset;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  line-height: var(--line-height);
  background: var(--background-color);
  color: var(--text-color);

  * {
    transition:
      transform 500ms ease,
      background-color 500ms ease,
      background-image 500ms ease,
      opacity 500ms ease,
      box-shadow 500ms ease,
      border-color 500ms ease,
      filter 500ms ease,
      clip-path 500ms ease,
      outline-color 500ms ease;
  }

  a,
  button,
  label,
  span,
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    transition-property: color;
    transition-duration: 500ms;
    transition-timing-function: ease;
  }

  @media (prefers-reduced-motion: reduce) {
    * {
      transition-duration: 1ms !important;
    }
  }

  &.hidden {
    overflow: hidden;
  }
}

a:any-link {
  color: inherit;
}

input,
textarea,
button {
  font-family: "Roboto", sans-serif;
}

figure {
  padding: 0;
  margin: 0;
}

img {
  display: block;
  height: auto;
}

.no-scroll {
  overflow: hidden;
}

@mixin noscrollbar {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */

  &::-webkit-scrollbar {
    /* WebKit */
    width: 0;
    height: 0;
  }
}

.button--group {
  display: flex;

  >div:not(:first-child) {
    margin-left: 1rem;
  }
}

.form {

  >div,
  >input,
  >button {
    margin-bottom: 1rem;

    &:last-child {
      margin-bottom: 0px;
    }
  }
}

.flex {
  display: flex;

  &-direction-column {
    flex-direction: column;
  }

  &-direction-row {
    flex-direction: row;
  }

  &-align-items-center {
    align-items: center;
  }
}

.position {
  &-relative {
    position: relative;
  }

  &-absolute {
    position: absolute;
  }
}