main.scss

@import './reset.css';
@import '../theme.scss';
@import './variables.scss';

/* Globals */

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  font-size: 17px;

  body {
    font-family: $font-family;
    line-height: 1.5;
    color: $color-black;
  }
}

*:focus, *::-moz-focus-inner {
  outline: none;
  border: none;
}

* {
  -webkit-tap-highlight-color: transparent;
}

/* Grid Basics */

.content-area {
  margin-top: 48px;
}

.content-wrapper {
  box-sizing: border-box;
  margin: auto;
  padding: 0 $grid-margin-mobile;

  max-width: $grid-max-width;
}
.row {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  position: relative;
}
.row-centered {
  justify-content: center;
}
.row-middle {
  align-items: center;
}
.row-wrapping {
  margin-bottom: -$spacing-4;
}
.col {
  padding: 0 $grid-gutter-mobile/2;
  box-sizing: border-box;
  width: 100%;

  &.col-wrapping {
    margin-bottom: $spacing-4;
    &.col-no-bottom-margin {
      margin-bottom: 0;
    }
  }

  .row {
    padding-bottom: -$spacing-4;
    margin-left: -$grid-gutter-mobile/2;
    margin-right: -$grid-gutter-mobile/2;
  }
}


// Grid

.col-12 {
  width: 100%;
}
.col-10 {
  width: 83.333%;
}
.col-9 {
  width: 75%;
}
.col-8 {
  width: 66.667%;
}
.col-6 {
  width: 50%;
}
.col-4 {
  width: 33.333%;
}
.col-3 {
  width: 25%;
}

/* Helpers */

.centered {
  text-align: center;
}
.right-aligned {
  text-align: right;
}
.extra-margin-top {
  margin-top: $spacing-4;
}
.extra-margin-bottom {
  margin-bottom: $spacing-4;
}
.extra-padding-h {
  padding: 0 10%;
}
.extra-padding-h-big {
  padding: 0 25%;
}
.overflow-hidden {
  overflow: hidden;
}
.margin-bottom {
  margin-bottom: $spacing-4;
}


/* Elements */

a {
  color: $color-primary;
  text-decoration: none;
  &:visited {
    color: $color-primary;
  }
  &:active {
    color: $color-primary-shade-20;
  }
  @media (hover: hover) {
    &:hover {
      color: $color-primary-shade-20;
    }
  }
}


.button {
  height: 40px;
  font-family: $font-family;
  font-size: $font-size-small;
  text-transform: uppercase;
  background: none;
  padding: 0 20px;
  border-radius: $border-radius;
  outline: none;
  cursor: pointer;

  transition: all $transition-duration-short $transition-timing-function;

  &.button-primary {
    font-weight: 700;
    background-color: $color-primary;
    color: white;
    box-shadow: 0px 4px 8px -4px rgba($color-black,0.2);
    &:active, &:focus {
      background-color: $color-primary-shade-20;
    }
    @media (hover: hover) {
      &:hover {
        background-color: $color-primary-shade-20
      }
    }
  }
  &.button-secondary,
  &.button-toggle {
    border: 1px solid $color-primary-tint-50;
    color: $color-primary;
    &:active, &:focus {
      border-color: $color-primary;
      color: $color-primary-shade-20;
    }
    @media (hover: hover) {
      &:hover {
        border-color: $color-primary;
        color: $color-primary-shade-20;
      }
    }

    &.button-toggle {
      &.selected {
        border-width: 4px;
        background-color: rgba( $color-primary, 0.1 );
        border-color: $color-primary;
      }
    }

    &.button-secondary-inverted {
      border-color: rgba( 255,255,255, 0.75 );
      color: white;
      &:active, &:focus {
        border-color: rgba( 255,255,255, 1);
        color: rgba( white, 0.75 );
      }
      @media (hover: hover) {
        &:hover {
          border-color: rgba( 255,255,255, 1);
          color: rgba( white, 0.75 );
        }
      }
    }

    &.button-secondary-naked {
      border: none;
    }
  }

  &.button-user {
    padding: 0;
    width: 40px;
    background: mix($color-primary, $color-secondary);
    border-radius: 50%;
    color: white;
    font-weight: 400;
    font-size: $font-size-normal;

    &:active, &:focus {
      opacity: 0.75;
    }
    @media (hover: hover) {
      &:hover {
        opacity: 0.75;
      }
    }
  }

  &.button-normal-case {
    text-transform: none;
  }

  &.button-icon {
    position: relative;

    padding-left: 40px;

    svg {
      position: absolute;
      left: 11px;
      top: 11px;
      width: 16px;
      height: 16px;
      fill: white;
    }

    &.button-toggle {
      svg {
        transition: all $transition-duration-short $transition-timing-function;
      }
      &.selected {
        padding-left: 37px;
        svg {
          left: 8px;
          top: 8px;
        }
      }
    }

    &.button-secondary,
    &.button-toggle {
      svg {
        fill: $color-primary;
      }
      &:active, &:focus  {
        svg {
          fill: $color-primary-shade-20;
        }
      }
      @media (hover: hover) {
        &:hover {
          svg {
            fill: $color-primary-shade-20;
          }
        }
      }
    }

    &.button-secondary-inverted {
      svg {
        fill: white;
      }
      &:active, &:focus  {
        svg {
          fill: rgba( white, 0.75 );
        }
      }
      @media (hover: hover) {
        &:hover {
          svg {
            fill: rgba( white, 0.75 );
          }
        }
      }
    }

    &.button-secondary-naked {
      border: none;
    }

    &.button-icon-only {
      padding: 0;
      width: 40px;
    }

  }

  &:disabled {
    pointer-events: none;
    opacity: 0.25;
  }

}
a.button {
  display: inline-block;
  line-height: 40px;
}

.button-group {
  margin: -$spacing-1;

  .button {
    margin: $spacing-1;
  }
}

label {
  font-size: $font-size-small;
  line-height: 1.25;
  font-weight: 700;
  color: $color-secondary;
  .regular {
    font-weight: 400;
  }
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
  font-family: $font-family;
  font-size: $font-size-normal;
  color: $color-black;
  line-height: 1.5;
  appearance: none;
  height: 40px;
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid $color-primary;
  border-radius: 0;
  outline: none;

  &:focus {
    outline: none;
    border-bottom: 1px solid $color-primary-shade-20;
  }

  &::placeholder {
    color: $color-black-tint-50;
  }
}
textarea {
  height: auto;

  resize: none;
  padding-top: calc( ( 40px - #{$font-size-normal} * 1.5)/2 );
  padding-bottom: calc( ( 40px - #{$font-size-normal} * 1.5)/2 );
  overflow: hidden;

  &::placeholder {
    color: $color-black-tint-50;
  }
}

.form-field {
  display: inline-block;

  label, .custom-select {
    display: block;
    text-align: left;
  }
  label {
    margin-bottom: 4px;
  }
  .message {
    display: block;
    margin-top: 4px;
    font-size: $font-size-small;
    &.error {
      color: $color-error;
    }
    &.info {
      color: $color-black-tint-50;
    }
    &.success {
      color: $color-success;
    }
  }


  &.form-field-block {
    display: block;
  }
  &.form-field-right-aligned {
    text-align: right;
    label {
      text-align: right;
    }
  }

  &.disabled {
    opacity: 0.25;
    pointer-events: none;
  }

  .options {
    margin-top: $spacing-2;

    label {
      display: block;
      margin: 0;
      font-size: $font-size-small;
      font-weight: 400;
      color: $color-black-tint-30;
      position: relative;
      line-height: 1.5;
      padding-top: calc( (40px - #{$font-size-small} * 1.5) / 2);
      padding-bottom: calc( (40px - #{$font-size-small} * 1.5) / 2);

      padding-left: calc( 40px + #{$spacing-1} );

      cursor: pointer;
      transition: color $transition-duration-short $transition-timing-function;

      &.disabled {
        opacity: 0.25;
        pointer-events: none;
      }

      input {
        display:none;
      }

      .checkbox, .radio {
        position: absolute;
        width: 24px;
        height: 24px;
        top: 8px;
        left: 8px;
        background-color: $color-black-tint-90;
        border-radius: $border-radius;
        transition: background-color $transition-duration-short $transition-timing-function;

        &.radio {
          border-radius: 50%;
          svg {
            left: 6px;
            top: 6px;
            width: 12px;
            height: 12px;
          }
        }

        svg {
          display: none;
          position: absolute;
          left: 4px;
          top: 4px;
          width: 16px;
          height: 16px;
          fill: white;
        }
      }

      input:checked ~ span {
        color: $color-black;
      }
      input:checked ~ .checkbox,
      input:checked ~ .radio {
        background: $color-primary;
        svg {
          display: block;
        }
      }

      &:hover {
        color: $color-black;

        .checkbox, .radio {
          background-color: $color-black-tint-80;
        }
        input:checked ~ .checkbox,
        input:checked ~ .radio {
          background: $color-primary-shade-20;
        }

      }

    }
  }

}

.form-message {
  font-size: 0;
  display: flex;

  .icon {
    position: relative;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background-color: $color-secondary;

    svg {
      fill: white;
      position: absolute;
      top: 12px;
      left: 12px;
      width: $spacing-2;
      height: $spacing-2;
    }
  }
  .text {
    font-size: $font-size-normal;
    font-weight: 700;
    padding-top: calc( (40px - 1.5rem)/2 );
    padding-left: $spacing-2;
  }

  &.form-message-centered {
    justify-content: center;
  }
  &.form-message-error {
    .icon {
      background-color: $color-error;
    }
    .text {
      color: $color-error;
    }
  }
  &.form-message-success {
    .icon {
      background-color: $color-success;
    }
    .text {
      color: $color-success;
    }
  }
}

.custom-select {

  display: inline-block;
  position: relative;

  select {
    padding-right: 32px;
    color: $color-black;

    &.placeholder {
      color: $color-black-tint-50;

      &:focus {
        option {
          color: $color-black;
        }
      }
    }
  }
  svg {
    position: absolute;
    top: 13px;
    right: 10px;
    height: 12px;
    fill: $color-black;
    pointer-events: none;
  }
}


@media only screen and (min-width: $viewport-mobile-large) {

  html {
    font-size: 18px;
  }

  .content-wrapper {
    padding: 0 $grid-margin-mobile-large;
  }

  .col {
    padding: 0 $grid-gutter-mobile-large/2;

    .row {
      margin-left: -$grid-gutter-mobile-large/2;
      margin-right: -$grid-gutter-mobile-large/2;
    }
  }

  .col-mobile-large-12 {
    width: 100%;
  }
  .col-mobile-large-10 {
    width: 83.333%;
  }
  .col-mobile-large-8 {
    width: 66.667%;
  }
  .col-mobile-large-6 {
    width: 50%;
  }
  .col-mobile-large-4 {
    width: 33.333%;
  }

  .content-area {
    margin-top: 64px;
  }

  .content-wrapper {
    padding: 0 $grid-margin-mobile-large;
  }

}

@media only screen and (min-width: $viewport-tablet-portrait) {

  html {
    font-size: 19px;
  }

  .content-wrapper {
    padding: 0 $grid-margin-tablet-portrait;
  }
  .row {
    &.row-reverse-tablet-portrait {
      flex-direction: row-reverse;
    }
  }
  .row-wrapping {
    margin-bottom: -$spacing-5;
  }
  .col {
    padding: 0 $grid-gutter-tablet-portrait/2;
    &.col-wrapping {
      margin-bottom: $spacing-5;
      &.col-tablet-portrait-no-bottom-margin {
        margin-bottom: 0;
      }
    }

    .row {
      margin-left: -$grid-gutter-tablet-portrait/2;
      margin-right: -$grid-gutter-tablet-portrait/2;
    }
  }

  .col-tablet-portrait-12 {
    width: 100%;
  }
  .col-tablet-portrait-10 {
    width: 83.333%;
  }
  .col-tablet-portrait-9 {
    width: 75%;
  }
  .col-tablet-portrait-8 {
    width: 66.667%;
  }
  .col-tablet-portrait-6 {
    width: 50%;
  }
  .col-tablet-portrait-4 {
    width: 33.333%;
  }
  .col-tablet-portrait-3 {
    width: 25%;
  }
  .col-tablet-portrait-2 {
    width: 16.667%;
  }

  .extra-margin-top {
    margin-top: $spacing-5;
  }
  .margin-bottom {
    margin-bottom: $spacing-5;
    &:last-child {
      margin-bottom: 0;
    }
  }


  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea {
    height: 48px;
  }
  textarea {
    height: auto;
    padding-top: calc( ( 48px - #{$font-size-normal} * 1.5)/2 );
    padding-bottom: calc( ( 48px - #{$font-size-normal} * 1.5)/2 );
  }

  .form-field {

    .options {
      label {

        padding-top: calc( (48px - #{$font-size-small} * 1.5) / 2);
        padding-bottom: calc( (48px - #{$font-size-small} * 1.5) / 2);

        padding-left: calc( 48px + #{$spacing-1} );

        .checkbox, .radio {

          width: 24px;
          height: 24px;
          top: 12px;
          left: 12px;

          svg {
            left: 4px;
            top: 4px;
            width: 16px;
            height: 16px;
          }

        }
      }
    }

  }

  .form-message {

    .icon {
      min-width: 48px;
      height: 48px;
      svg {
        top: 16px;
        left: 16px;
      }
    }
    .text {
      padding-top: calc( (48px - 1.5rem)/2 );
    }
  }

  .custom-select {
    svg {
      top: 17px;
      fill: $color-black;
    }
  }

  .content-area {
    margin-top: 64px;
  }

  .button {
    height: 48px;
    white-space:nowrap;
    padding: 0 24px;

    &.button-user {
      width: 48px;
    }

    &.button-icon {
      padding-left: 48px;
      svg {
        left: 15px;
        top: 15px;
      }
      &.button-toggle {
        &.selected {
          padding-left: 45px;
          svg {
            left: 12px;
            top: 12px;
          }
        }
      }

      &.button-icon-only {
        width: 48px;
      }
    }
  }
  a.button {
    line-height: 48px;
  }

}

@media only screen and (min-width: $viewport-large) {

  html {
    font-size: 20px;
  }

  .content-wrapper {
    padding: 0 $grid-margin-large;
  }
  .row {
    &.row-reverse-large {
      flex-direction: row-reverse;
    }
  }

  .col {
    padding: 0 $grid-gutter-large/2;

    &.col-wrapping {
      &.col-large-no-bottom-margin {
        margin-bottom: 0;
      }
    }

    .row {
      margin-left: -$grid-gutter-large/2;
      margin-right: -$grid-gutter-large/2;
    }
  }

  .row-large-right-aligned {
    justify-content: flex-end;
  }

  .col-large-12 {
    width: 100%;
  }
  .col-large-10 {
    width: 83.333%;
  }
  .col-large-9 {
    width: 75%;
  }
  .col-large-8 {
    width: 66.667%;
  }
  .col-large-7 {
    width: 58.333%;
  }
  .col-large-6 {
    width: 50%;
  }
  .col-large-5 {
    width: 41.667%;
  }
  .col-large-4 {
    width: 33.333%;
  }
  .col-large-3 {
    width: 25%;
  }
  .col-large-2 {
    width: 16.667%;
  }
  .col-large-before-1 {
    margin-left: 8.333%;
  }
  .col-large-before-2 {
    margin-left: 16.667%;
  }
  .col-large-before-3 {
    margin-left: 25%;
  }
  .col-large-before-4 {
    margin-left: 33.333%;
  }
  .col-large-before-6 {
    margin-left: 50%;
  }
  .col-large-after-1 {
    margin-right: 8.333%;
  }
  .col-large-after-2 {
    margin-right: 16.667%;
  }
  .col-large-after-3 {
    margin-right: 25%;
  }
  .col-large-before-5 {
    margin-left: 41.667%;
  }

  .left-aligned-large {
    text-align: left;
  }
  .right-aligned-large {
    text-align: right;
  }

  .extra-padding-large-h {
    padding: 0 10%;
  }
  .extra-padding-large-h-big {
    padding: 0 25%;
  }

  .content-area {
    margin-top: 80px;
  }
}

@media only screen and (min-width: $viewport-xlarge) {

  .content-wrapper {
    padding: 0 $grid-margin-xlarge;
  }
  .col {
    padding: 0 $grid-gutter-xlarge/2;

    .row {
      margin-left: -$grid-gutter-xlarge/2;
      margin-right: -$grid-gutter-xlarge/2;
    }
  }

  .col-xlarge-4 {
    width: 33.333%;
  }
  .col-xlarge-5 {
    width: 41.667%;
  }
  .col-xlarge-6 {
    width: 50%;
  }
  .col-xlarge-7 {
    width: 58.333%;
  }
  .col-xlarge-8 {
    width: 66.667%;
  }
  .col-xlarge-before-1 {
    margin-left: 8.333%;
  }
  .col-xlarge-after-2 {
    margin-right: 16.667%;
  }

}