// index.less
@import "/_assets/styles/app.less";
@import "/_components/page-header/page-header.less";
@import "/_components/footer/footer.less";
@import "/_components/nav-menu/nav-menu.less";
@import "/_components/modal/modal.less";
@import "/_components/primary-button/primary-button.less";
@import "/_components/secondary-button/secondary-button.less";
@import "/_components/timer/timer.less";

.page__container {

    &-award{
        background-color: @white;
        padding: @spacing-large @spacing-extra-large;
        border-radius: 8px;
        width: 100%;

        .title{
            font-size: 32px;
            font-weight: @fontWeights-bold;
            color: @text-dark;
            .mb-g;
        }

        .info{
            color: @text-dark;
            font-size: @fontSize-large;
            font-weight: @fontWeights-regular;
            .mb-m;

            .general {
                font-size: 20px;
                font-weight: @fontWeights-bold;
            }
        }

        a{
            border: none;
            background-color: transparent;
            color: @title;
            font-size: @fontSize-extra-medium;
            font-weight: @fontWeights-semi-bold;
            text-decoration: underline transparent;
            transition: text-decoration .3s ease;
            cursor: pointer;

            &:hover{
                text-decoration-color: @title;
            }
        }
    }

    &-category{
        background-color: @white;
        padding: @spacing-large @spacing-extra-large;
        border-radius: 8px;
        width: 100%;

        .title{
            color: @text-dark;
        }
    }

    &-current-award{
        height: 300px;
        background-position: center;
        background-size: cover;
        border-radius: 16px;

        .d-flex;
        .flex-column;
        .flex-align-center;
        .flex-justify-center;

        p{
            font-size: 25px;
            font-weight: @fontWeights-bold;
            color: #E7ECEF;
            margin-bottom: 20px;
        }

        button{
            background-color: @success-extra-light;
            color: @success-dark;
            font-size: @fontSize-small;
            font-weight: @fontWeights-medium;
            border-radius: 16px;
            padding: 10px 20px;
        }
    }

    &-title{
        width: 100%;
        .d-flex;
        .flex-align-end;
        .flex-justify-between;

        .pb-m;

        margin-top: 60px;
        margin-bottom: 40px;
        border-bottom: 0.5px solid @text-light;

        .primary-button__wrapper{
            width: max-content;
        }

        .title{
            font-size: @fontSize-extra-large;
            font-weight: @fontWeights-semi-bold;
        }
    }

    &-award-list{
        .d-flex;
        .flex-align-center;
        .flex-justify-between;
        .flex-wrap;

        .old-award{
            width: calc(50% - 24px);

            height: 300px;
            background-position: center;
            background-size: cover;
            border-radius: 16px;
            position: relative;

            .d-flex;
            .flex-column;
            .flex-align-center;
            .flex-justify-center;

            p{
                font-size: 25px;
                font-weight: @fontWeights-bold;
                color: #E7ECEF;
                margin-bottom: 20px;
            }

            button{
                background-color: #FFFFFF;
                color: #33383D;
                font-size: @fontSize-small;
                font-weight: @fontWeights-medium;
                border-radius: 10px;
                padding: 10px 20px;
            }

            .status{
                border-radius: 16px;
                background-color: #F7F9FD;
                padding: 6px 20px;
                color: #667085;
                font-size: @fontSize-small;
                font-weight: @fontWeights-medium;
                position: absolute;
                top: 37px;
                right: 24px;
            }
        }
    }
}

.status{
    padding: 2px 6px;
    font-size: @fontSize-small;
    font-weight: @fontWeights-semi-bold;
    border-radius: 16px;
    width: max-content;
}

.status-grey{
    color: @text-medium;
    background-color: @text-extra-light;
}

.status-green{
    color: @success-dark;
    background-color: @success-extra-light;
}

.status-blue{
    color: @primary-dark;
    background-color: @primary-extra-light;
}

.status-yellow{
    color: @warning-dark;
    background-color: @warning-light;
}

.status-red{
    color: @danger-dark;
    background-color: @danger-extra-light;
}