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

main#main {
  padding-top: 0;
}

$profile-width: $content-width * 2;
$profile-pfp-width: $pfp-width * 5;

$profile-header-content-margin: $profile-pfp-width + $outer-gap * 5;

#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: $profile-width;
  flex-grow: 1;

  .banner {
    width: 100%;
    max-width: 100%;
    min-height: $profile-width * 3/8;
    aspect-ratio: 5;

    img {
      object-fit: cover;
    }
  }

  .info {
    position: relative;
    margin-bottom: $profile-pfp-width / 2;

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

      .pfp {
        height: $profile-pfp-width;
      }
    }

    .content {
      margin-left: $profile-header-content-margin;
      margin-top: $outer-gap * 2;

      .name {
        font-size: $font-size * 2;
      }

      .follow {
        margin-left: auto;
        margin-right: $outer-gap * 2;

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

    }
  }

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

  .options {
    height: 3em;

    .btn {
      width: 10em;
    }
  }
}

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

      .content {
        margin-left: $profile-header-content-margin * 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: $inner-gap * 2;
  }
}