Sindbad~EG File Manager

.pso-w-profile {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    > * {
        &:last-child {
            border-bottom-left-radius: var(--R);
            border-bottom-right-radius: var(--R);
        }
    }
}

.pso-w-profile__cover {
    --h: 130px;

    display: flex;
    align-items: start;
    justify-content: space-between;
    height: var(--h);
    padding: var(--G4);
    background-color: var(--c-base-800);
    border-top-left-radius: var(--R);
    border-top-right-radius: var(--R);

    @include mq($from: desktop) {
        padding: var(--G5);
    }
}

.pso-w-profile-cover__notifs {
    display: flex;
    gap: var(--G1);
}

.pso-w-profile-cover__actions {
    display: flex;
    gap: var(--G1);
}

.pso-w-profile__user {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--G2);
    padding: var(--G3) var(--G4);
    background-color: var(--c-base);

    @include mq($from: desktop) {
        gap: var(--G3);
        padding: var(--G4) var(--G5);
    }
}

.pso-w-profile__data {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pso-w-profile-user__avatar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-inline: auto;
}

.pso-w-profile-user__meta {
    display: flex;
    flex-direction: column;
    align-items: center;

    > span {
        &:first-child {}

        &:last-child {
            font-size: var(--F-XS);
            color: var(--c-contrast-light);
        }
    }
}

.pso-w-profile__name {
    text-align: center;
    color: var(--c-contrast);
}

.pso-w-profile__progress {
    padding: var(--G3) var(--G4);
    background-color: var(--c-base);
    text-align: center;
    text-decoration: none;
    border-top: 1px solid var(--c-base-300);

    &:hover {
        text-decoration: none;
        background-color: var(--c-base-50);
    }

    .pso-progress__label {
        font-size: var(--F-XS);
    }

    @include mq($from: desktop) {
        padding: var(--G4) var(--G5);
        transition: var(--TRANS);
    }
}

.pso-w-profile__nav {
    padding-top: var(--G3);
    padding-bottom: var(--G2);
    padding-inline: var(--G4);
    background-color: var(--c-base);
    border-top: 1px solid var(--c-base-300);

    @include mq($from: desktop) {
        padding-top: var(--G4);
        padding-bottom: var(--G3);
        padding-inline: var(--G5);
    }
}

.pso-w-profile-nav__title {
    font-size: var(--F-M);
    color: var(--c-contrast);
}

.pso-w-profile-nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.pso-w-profile-nav__link {
    --c: var(--c-contrast-light);
    --ic: var(--c-contrast-slight);

    display: flex;
    align-items: center;
    gap: var(--G2);
    padding-block: var(--G2);
    font-size: var(--F-S);
    color: var(--c);
    text-decoration: none;
    border-bottom: 1px solid var(--c-base-300);

    i {
        color: var(--ic);
    }

    &:hover,
    &:active {
        --c: var(--c-primary-sdark);
        --ic: var(--c-primary-sdark);

        text-decoration: none;
    }

    &:last-child {
        border-bottom: none;
    }

    @include mq($from: desktop) {
        transition: var(--TRANS);
    }
}