@import "./variables";
@import "./mixins";

@include font-face("Helvetica Neue");
@include font-face("Material Icons");
@include font-face("Facebook");
@include font-face("SF Pro");

$header-height: $scale * 3.5;

* {
  box-sizing: border-box;
}

hr {
  color: $surface2;
  background: $surface2;
  width: 100%;
  height: 1px;
  border: none;
}

a,
input,
button {
  background: none;
  border: none;
  color: inherit;
}

a,
button {
  cursor: pointer;
}

button {
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
}

html {
  color: $text;
  font-family: $font;
  font-size: $font-size;
  background: $surface0;

  .subtext {
    color: $subtext;
  }
}

html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
}

header#header {
  height: $header-height;
  background: $surface0;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 $inner-gap;
  border-bottom: 1px solid $surface1;
  z-index: $header-z-index;

  .left,
  .center,
  .right {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
  }

  .left {
    .logo {
      font-family: $header-font;
      color: $blue;
      font-size: 2.25em;
      height: 100%;
      line-height: 2rem;
      margin-top: $inner-gap;
    }
  }

  .center {
    position: absolute;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    justify-content: center;
  }

  .right {
    justify-content: flex-end;

    > .pfp {
      padding: 0;
    }

    #user-menu {
      position: fixed;
      right: $inner-gap;
      top: $header-height + $inner-gap;
      min-width: fit-content;
      width: 20em;
      animation: fadeIn .1s, slideIn .1s linear;

      .user-menu-header {
        align-items: center;

        .pfp {
          margin-right: $inner-gap;
        }
      }

      .btn {
        justify-content: flex-start;
      }
    }
  }
}

@media (min-width: 800px) {
  header#header {
    .center {
      .btn {
        padding: 0 3rem;
        height: 100%;

        > span {
          display: none;
        }
      }
    }

    .right {
      #action-hamburger {
        display: none;
      }
    }
  }
}

@media (max-width: 800px) {
  header#header {
    .center {
      display: none;
      position: absolute;
      flex-direction: column;
      top: 100%;
      height: fit-content;
      background-color: $surface0;
      width: 100%;
      left: 0;
      transform: translateX(0%);
      justify-content: flex-start;

      &.visible {
        display: inherit !important;
      }

      .btn {
        width: 100%;
        padding: $inner-gap 0;
        padding-left: 3rem;
        justify-content: flex-start;

        > span {
          margin-left: $inner-gap;
        }

        &.btn-border {
          ::before {
            background: inherit;
          }
        }
      }
    }
  }
}

main#main {
  background: $base;
  padding-top: $inner-gap;
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer#footer {
  text-align: center;
  padding: $inner-gap;
  color: $subtext;
  font-size: $font-size-small;
}

.btn {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
  border-radius: $inner-radius;
  font-weight: bold;
  text-decoration: none;
  padding: $inner-gap * 0.5;

  &:hover {
    background: $surface1;
  }

  &.btn-alt {
    background: $surface1;

    &:hover {
      background: $surface2;
    }
  }

  &.btn-primary {
    color: $blue-alt;

    &.btn-alt {
      background: $blue;
      color: $white;

      &:hover {
        background: $blue-alt;
      }
    }
  }

  &.btn-success,
  &.btn-submit {
    color: $green-alt;

    &.btn-alt {
      background: $green;
      color: $white;

      &:hover {
        background: $green-alt;
      }
    }
  }

  &.btn-blend {
    font-weight: inherit;

    &:hover {
      background: inherit !important;
      text-decoration: underline;
    }
  }

  &.btn-border {
    ::before {
      position: absolute;
      content: "";
      display: block;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 1px;
      background: $blue-alt;
    }
  }
}

input.btn {
    text-align: left;
    font-weight: normal;
}

.image {
  display: block;

  .inner {
    width: 100%;
    height: 100%;
    display: inherit;
    border-radius: inherit;
  }

  &.pfp {
    height: 2.5em;
    aspect-ratio: 1;
    border-radius: 100%;
  }
}

/* fix banner on profile pages */
object.inner {
  pointer-events: none;
}

/* loading animation*/
.loading {
  background: linear-gradient(-45deg, $surface0) 0%, var(--base) 25%, var(--surface0) 50%;
  background-size: 500%;
  background-position-x: 150%;
}

/* loaded bg to fix transparent images */
.loaded {
  background-color: $base;
}

.card {
  background-color: $surface0;
  border-radius: $outer-radius;
  padding: $inner-gap;
  max-width: $content-width;
  margin-bottom: $outer-gap;

  p {
    margin-bottom: 0;
  }

  form {
    flex-grow: 1;
  }

  .sub-card {
    background-color: $surface1;
    border-radius: $inner-radius;
    padding: $inner-inner-gap;
  }
}

.row {
  @include row;
}

.col {
  @include column;
}

.hidden {
  display: none;
}

.grow {
  width: auto;
  flex: 1;
  flex-grow: 1;
}

.ml {
  margin-left: 1rem;
}

.mr {
  margin-right: 1rem;
}

.mt {
  margin-top: 1rem;
}

.mb {
  margin-bottom: .75rem;
}

.pl {
  padding-left: 1rem;
}

.pr {
  padding-right: 1rem;
}

.pt {
  padding-top: 1rem;
}

.pb {
  padding-bottom: 1rem;
}

.modal-container {
  z-index: $modal-z-index;
  position: fixed;
  background: #fff2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;

  .modal {
    background-color: $surface0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: $content-width;
    min-height: $content-width * 0.6;
    border-radius: $outer-radius;
    @include column;
    animation: fadeIn .1s, slideInModal .1s linear;

    .modal-header {
      display: block;
      position: relative;
      border-bottom: 1px solid $surface1;
      cursor: grab;
      padding: $inner-gap;
      text-align: center;

      .modal-title {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-weight: bold;
      }

      .modal-close {
        float: right;
      }
    }

    .modal-content {
      flex-grow: 1;
      padding: 1rem;
    }

    .modal-footer {
      margin-top: auto;
      padding: 0 1rem;
      padding-bottom: 1rem;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    }


    > form {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }
  }
}

@media (max-width: $content-width) {
  .modal-container {
    .modal {
      min-width: 100%;
      width: 100%;
    }
  }
}

@keyframes slideInModal {
  0% {
    animation-timing-function: ease-in;
    transform: translate(-50%, -60%);
  }
}

@keyframes slideIn {
  0% {
    animation-timing-function: ease-in;
    transform: translate(0, -20%);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.mi {
  font-family: 'Material Icons';
  font-style: normal;
  font-size: 1.5em;

  &.mi-sm {
    font-size: 1em;
  }

  &.mi-lg {
    font-size: 2em;
  }
}

.ilang {
  i + span:not(empty) {
    margin-left: $inner-gap / 2;
  }

  span:empty {
    display: none;
  }
}

#toast-container {
  position: fixed;
  top: $header-height;
  left: 100%;
  transform: translateX(-100%);
  padding: $outer-gap;
  z-index: $toast-z-index;

  .toast {
    padding: $inner-gap;
    margin: $inner-gap;
    border-radius: $inner-radius;
    min-width: 15em;
    animation: fadeIn .1s, slideIn .25s linear;
    display: flex;
    justify-content: space-between;

    &.error {
      background: $red;
    }

    &.success {
      background: $green;
    }
  }
}

form {
  input {
    display: block;
    font-size: 1.1em;
    outline: 2px solid $surface2;
    border-radius: $inner-radius;
    padding: $inner-gap;

    &:focus {
      outline-color: $blue;
    }

    &[type=radio] {
      outline: none;
      padding: 3em;
      width: 1em;
    }
  }

  .form-input {
    position: relative;

    label {
      padding-left: $inner-gap / 2;
      position: absolute;
      top: 50%;
      transform: translate(.5rem, -40%);
      color: $subtext;
      transition: all 0.2s ease-out;
      pointer-events: none;
      width: fit-content;
      font-size: 1.1rem;
    }

    input {
      width: 100%;
      flex-grow: 1;

      &:focus,
      &:not(:placeholder-shown) {
        & + label {
          position: absolute;
          top: 50%;
          color: $text;
          top: 0;
          padding: .5rem;
          padding-top: 0;
          font-size: .75rem;
          transform: translate(.5rem, -25%);
          background-color: $surface0;
        }
      }
    }
  }

  .form-radio {
    @include row;
    width: auto;
    flex-grow: 1;
    position: relative;

    label {
      border: 1px solid $surface2;
      height: fit-content;
      width: 100%;
      padding: $inner-gap;
      border-radius: $inner-radius;
      cursor: pointer;
    }

    input {
      position: absolute;
      top: 50%;
      left: 100%;
      transform: translate(-250%, -70%);
    }
  }
}

#about-menu {
  @include column;
  justify-content: center;
  align-items: center;

  .logo {
    color: $blue;
    font-family: $header-font;
    font-size: 2.25rem;
    margin-bottom: $inner-gap;
  }
}