hensei-web/styles/globals.scss

@import "~meyer-reset-scss";
@import "themes.scss";

html {
  background-color: var(--background);
  font-size: 62.5%;
  height: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-size: 1.4rem;
  height: 100%;
  padding: $unit * 2 !important;

  &.no-scroll {
    overflow: hidden;
  }
}

#__next {
  height: 100%;
}

main {
  min-height: 90%;
}

a {
  text-decoration: none;

  &.wind {
    color: $wind-text-10;
  }

  &.fire {
    color: $fire-text-10;
  }

  &.water {
    color: $water-text-10;
  }

  &.earth {
    color: $earth-text-10;
  }

  &.dark {
    color: $dark-text-10;
  }

  &.light {
    color: $light-text-10;
  }
}

button,
input {
  font-family: system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial,
    sans-serif;
}

h1,
h2,
h3,
p {
  color: $grey-10;
}

h1 {
  font-size: 2.1rem;
  font-weight: $medium;
  text-align: center;
}

select {
  appearance: none;
  background-image: url("/icons/Arrow.svg");
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: 97%;
  background-size: $unit * 1.5;
  border: none;
  border-radius: 6px;
  color: $grey-10;
  margin-bottom: $unit;
  font-size: $font-regular;
  padding: 0 ($unit * 2);
  height: $unit * 6;
  width: 100%;

  &:hover {
    cursor: pointer;
  }
}

#Content {
  display: flex;
  flex-direction: column;
  gap: $unit * 3;
  margin-top: $unit * 3;
  min-width: 752px;

  @media (max-width: $medium-screen) {
    min-width: auto;
    width: 100%;
  }
}

.Overlay {
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
}

.Dialog {
  $multiplier: 4;

  animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running
    openModal;
  background: white;
  border-radius: $unit;
  display: flex;
  flex-direction: column;
  gap: $unit * $multiplier;
  height: auto;
  min-width: $unit * 48;
  min-height: $unit * 12;
  padding: $unit * $multiplier;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 21;

  .DialogHeader {
    display: flex;
    align-items: center;
    gap: $unit;

    .left {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      gap: $unit;

      p {
        color: $grey-40;
        font-size: $font-small;
        line-height: 1.25;
      }
    }
  }

  .DialogClose {
    background: transparent;

    &:hover {
      cursor: pointer;

      svg {
        fill: $error;
      }
    }

    svg {
      fill: $grey-40;
      float: right;
      height: 24px;
      width: 24px;
    }
  }

  .DialogTitle {
    font-size: $font-xlarge;
    flex-grow: 1;
  }

  .DialogTop {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: calc($unit / 2);

    .SubTitle {
      color: $grey-50;
      font-size: $font-small;
      font-weight: $medium;
    }
  }

  .DialogDescription {
    flex-grow: 1;
  }

  .actions {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }
}

.Hovercard {
  background: #222;
  border-radius: $unit;
  color: white;
  display: flex;
  flex-direction: column;
  gap: $unit * 2;
  padding: $unit * 2;
  width: 300px;

  .top {
    display: flex;
    flex-direction: column;
    gap: calc($unit / 2);

    .title {
      align-items: center;
      display: flex;
      flex-direction: row;
      gap: $unit * 2;

      h4 {
        flex-grow: 1;
        font-size: $font-medium;
        line-height: 1.2;
        min-width: 140px;
      }

      img {
        height: auto;
        width: 100px;
      }
    }

    .subInfo {
      align-items: center;
      display: flex;
      flex-direction: row;
      gap: $unit * 2;

      .icons {
        display: flex;
        flex-direction: row;
        flex-grow: 1;
        gap: $unit;
      }

      .UncapIndicator {
        width: 100px;
      }
    }
  }

  section {
    h5 {
      font-size: $font-small;
      font-weight: $medium;
      opacity: 0.7;

      &.wind {
        color: $wind-bg-20;
      }

      &.fire {
        color: $fire-bg-20;
      }

      &.water {
        color: $water-bg-20;
      }

      &.earth {
        color: $earth-bg-20;
      }

      &.dark {
        color: $dark-bg-10;
      }

      &.light {
        color: $light-bg-20;
      }
    }
  }

  a.Button {
    display: block;
    padding: $unit * 1.5;
    text-align: center;
  }
}

#Teams,
#Profile {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: $unit * 2;
}

#NotFound {
  height: 200px;
  width: 400px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;

  h2 {
    color: $grey-60;
    font-size: $font-regular;
    text-align: center;
  }
}

img.profile {
  background: $grey-90;

  &.fire {
    background: $fire-bg-20;
  }

  &.water {
    background: $water-bg-20;
  }

  &.wind {
    background: $wind-bg-20;
  }

  &.earth {
    background: $earth-bg-20;
  }

  &.dark {
    background: $dark-bg-10;
  }

  &.light {
    background: $light-bg-20;
  }
}

i.tag {
  background: $grey-90;
  border-radius: calc($unit / 2);
  font-size: 10px;
  font-weight: $bold;
  padding: 4px 6px;
  text-transform: uppercase;
}

.infinite-scroll-component {
  overflow: hidden !important;
}

.SearchFilterBar {
  display: flex;
  gap: $unit;
  padding: 0 ($unit * 3);
}

@keyframes openModal {
  0% {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.96);
  }

  100% {
    // opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}