@import '~meyer-reset-scss';

html {
    background: $background-color;
    font-size: 62.5%;
}

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: 100vh;
    padding: $unit * 2 !important;
    
    &.no-scroll {
        overflow: hidden;
    }
}

#__next {
    height: 100%;
}

main {
    min-height: 90%;
}

a {
    text-decoration: none;
}

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

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

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-00;
    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: $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: $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-light;
            }
        
            &.fire {
                color: $fire-bg-light;
            }
        
            &.water {
                color: $water-bg-light;
            }
        
            &.earth {
                color: $earth-bg-light;
            }
        
            &.dark {
                color: $dark-bg-light;
            }
        
        
            &.light {
                color: $light-bg-light;
            }
        }
    }

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

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

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

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

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

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

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

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

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