@import 'colours.less';

.account-page {
    height: 100%;
    display: grid;

    grid-template-rows: minmax(min-content, 2fr) 1fr;
    grid-template-columns: 1fr;

    grid-template-areas:
        "team"
        "account";

    button {
        display: block;
        height: 3em;
        width: 75%;
    }

    input {
        width: 75%;
        height: 3em;
        display: block;
    }

    .team {
        grid-area: team;

        /* poor man's <hr>*/
        border-bottom: 0.1em solid #444;
    }

    .account {
        margin: 2em 2em 0 0;
        grid-area: account;

        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 0 1em;
    }
}

.stripe-btn {
    background: @yellow;
    color: black;
    border-radius: 2px;
    border-width: 0;

    &:active, &:focus, &:hover {
        color: black;
    }

    &[disabled] {
        border: 1px solid @yellow;
        color: @yellow;
        background: black;
    }
}