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

main#main {
  padding-top: 0;
}

$pfp-size: 12.5em;

#profile-header-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: $surface0;
  border-bottom: 1px solid $surface1;
}

#profile-header {
  min-width: 0;
  max-width: 80rem;
  flex-grow: 1;

  .banner {
    width: 100%;
    max-width: 100%;
    min-height: 30em;
    aspect-ratio: 5;

    img {
      object-fit: cover;
    }
  }

  .info {
    position: relative;
    margin-bottom: 6em;

    .pfp-wrapper {
      padding: $inner-gap / 2;
      background-color: $surface0;
      height: fit-content;
      border-radius: 100%;
      position: absolute;
      top: -2.5rem;
      left: $inner-gap;

      .pfp {
        height: $pfp-size;
      }
    }

    .content {
      margin-left: $pfp-size + 5em;
      margin-top: 2em;

      .name {
        font-size: 2em;;
      }

      .follow {
        margin-left: auto;
        margin-right: 2rem;

        a {
          width: 10rem;
          padding: $inner-gap / 2;
        }
      }

    }
  }

  > hr {
    margin: 0;
    border-bottom: 1px solid $surface1;
  }

  .options {
    height: 3rem;

    .btn {
      width: 10rem;
    }
  }
}

@media(max-width: 800px) {
  #profile-header {
    .info {
      .pfp-wrapper {
        .pfp {
          height: $pfp-size * 0.7;
        }
      }

      .content {
        margin-left: ($pfp-size + 5em) * 0.7;
      }
    }
  }
}

#tab-container {
  width: 100%;
  @include column;
  align-items: center;

  .tab {
    width: 100%;
  }
}

#tab-posts,
#tab-about {
  max-width: $content-width;
}

#tab-about {
  td:nth-child(1) {
    padding-right: 2rem;
  }
}