hensei-web/styles/globals.scss

@import '~meyer-reset-scss';
@import 'keyframes.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-2x !important;

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

#__next {
  height: 100%;
}

main {
  min-height: 90%;
}

a {
  color: $blue;
  text-decoration: none;

  &:visited {
    color: $blue;
  }

  &.wind {
    color: var(--wind-bg);
  }

  &.fire {
    color: var(--fire-bg);
  }

  &.water {
    color: var(--water-bg);
  }

  &.earth {
    color: var(--earth-bg);
  }

  &.dark {
    color: var(--dark-bg);
  }

  &.light {
    color: var(--light-bg);
  }
}

button,
input,
textarea {
  border: 2px solid transparent;
  font-family: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial,
    sans-serif;
  font-size: $font-regular;
}

button:focus-visible {
  border: 2px solid $blue;
  outline: none;
}

h1,
h2,
h3,
p {
  color: var(--text-primary);
  line-height: 1.3;
}

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

select {
  appearance: none;
  background-color: var(--input-bound-bg);
  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-15;
  margin-bottom: $unit;
  font-size: $font-regular;
  padding: 0 ($unit * 2);
  height: $unit * 6;
  width: 100%;

  &:hover {
    background-color: var(--input-bg-hover);
    cursor: pointer;
  }
}

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

  @include breakpoint(tablet) {
    min-width: auto;
    width: 100%;
  }
}

.PageContent {
  display: flex;
  flex-direction: column;
  gap: $unit-4x;
  max-width: $grid-width;
  margin: $unit-4x auto 0;

  h1 {
    font-size: $font-xxlarge;
    text-align: left;
  }

  h2 {
    font-size: $font-medium;
    font-weight: $medium;
    margin-bottom: $unit * 3;
  }

  p,
  li {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.3;
  }

  .LinkItem {
    $diameter: $unit-6x;
    align-items: center;
    background: var(--dialog-bg);
    border: 1px solid var(--link-item-bg);
    border-radius: $card-corner;
    display: flex;
    min-height: 82px;
    transition: background $duration-zoom ease-in,
      transform $duration-zoom ease-in;

    &:hover {
      background: var(--link-item-bg);
      color: var(--text-primary);

      .ShareIcon {
        fill: var(--text-primary);
        transform: translate($unit-half, calc(($unit * -1) / 2));
      }
    }

    &.Github {
      &:hover {
        .Left svg {
          fill: var(--text-primary);
        }
      }
    }

    &.Discord:hover .Left svg {
      fill: #5865f2;
    }

    a {
      display: flex;
      justify-content: space-between;
      padding: $unit-2x;
      width: 100%;

      &:hover {
        text-decoration: none;
      }

      .Left {
        align-items: center;
        display: flex;
        gap: $unit-2x;
        flex-grow: 1;

        h3 {
          font-weight: 600;
          max-width: 70%;
          line-height: 1.3;
        }
      }

      svg {
        fill: var(--link-item-image-color);
        width: $diameter;
        height: auto;
        transition: fill $duration-zoom ease-in;

        &.ShareIcon {
          width: $unit-4x;
        }
      }
    }

    h3 {
      font-weight: $bold;
    }
  }
}

#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;
  }

  &.anonymous {
    background: var(--anonymous-bg);
  }
}

i.tag {
  background: var(--tag-bg);
  color: var(--tag-text);
  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);

  @include breakpoint(phone) {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
  }
}

.Joined {
  $offset: 2px;

  align-items: center;
  background: var(--input-bg);
  border-radius: $input-corner;
  border: $offset solid transparent;
  box-sizing: border-box;
  display: flex;
  gap: $unit;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-right: calc($unit-2x - $offset);

  &.Bound {
    background-color: var(--input-bound-bg);

    &:hover {
      background-color: var(--input-bound-bg-hover);
    }
  }

  &:focus-within {
    border: $offset solid $blue;
    // box-shadow: 0 2px rgba(255, 255, 255, 1);
  }

  .Counter {
    color: $grey-55;
    font-weight: $bold;
    line-height: 42px;
  }

  .Input {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: $unit * 1.5 $unit-2x;
    padding-left: calc($unit-2x - $offset);

    &:focus {
      border: none;
      outline: none;
    }
  }
}