@import './reset.scss';
@import './fonts.scss';
@import './colors.scss';
@import './animations.scss';
@import './third-party/toastify.scss';
@import './third-party/onesignal.scss';
@import './third-party/fb-button.scss';

body {
  display: flex;
  @include font-base;
  color: var(--color-text-contrast);
  margin: 0;
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  @include font-base;
}

input,
textarea,
button {
  font-family: 'Lato', sans-serif;
}

strong {
  font-weight: 700;
}

#app {
  height: 100%;
  width: 100% !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

a {
  color: var(--color-airy-blue);
  background-color: transparent;

  &:hover {
    color: var(--color-airy-blue-hover);
  }
}

button:focus {
  outline: none;
}

/**
 * The invalid browser block has to work for older browser, too. Because of
 * that we use a limited css function set and don't have access to things like
 * css variables. Also this is namespaces behind the id to not leak any of this
 * to the rest of the app.
 */
#browser-not-supported {
  text-align: left;
  background-color: #f1faff;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;

  a {
    text-decoration: underline;
    color: #167fab;
  }

  a:visited {
    color: #167fab;
  }

  .invalid--header {
    background-color: #ffffff;
    width: 100%;
    padding: 16px 0;
  }

  .invalid--logo {
    margin: 0 auto;
    width: 960px;
  }

  .invalid--dialog {
    background-color: #f1faff;
  }

  .invalid--title {
    font-weight: 900;
    font-size: 49px;
    color: #212428;
    line-height: 56px;
    margin: 0;
    padding-top: 80px;
  }

  .invalid--spacer {
    width: 40px;
    height: 4px;
    background-color: #f7147d;
    color: #f7147d;
    border: 0;
    margin: 16px auto;
  }

  .invalid--explanation {
    font-weight: 400;
    font-size: 20px;
    color: #737373;
    line-height: 32px;
    margin-bottom: 16px;
  }

  .invalid--browserlist {
    text-align: center;
    width: 100%;
  }

  .invalid--browser {
    display: inline-block;
    margin: 16px 32px;
  }

  .invalid--browser-name {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #737373;
    margin: 16px 0;
  }

  .invalid--browser-link {
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #167fab;
  }

  .invalid--content {
    margin: 0 auto;
    padding: 32px;
    width: 960px;
    text-align: center;
  }

  .invalid--footer {
    clear: both;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #167fab;
    margin-top: 56px;
  }
}

@media (max-width: 960px) {
  #browser-not-supported {
    .invalid--logo {
      width: 100%;
      padding: 0 32px;
    }

    .invalid--content {
      width: 100%;
    }

    .invalid--title {
      font-weight: 900;
      font-size: 39px;
      line-height: 48px;
    }
  }
}
