@use '../../variables' as *;

$b: '.total';

#{$b} {
    background-color: $total-bg;
    border-radius: $total-radius;
    display: flex;
    flex-direction: column;
    padding: 4px * 6 4px * 4;

    @include dark-border;
    @include font($total-font);

    @media (--tablet-landscape-up) {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        padding-left: 4px * 8;
        padding-right: 4px * 8;
    }

    &_shadow {
        box-shadow: $total-shadow;
    }

    &__title {
        @include font($total-title-mobile-font);

        @media (--tablet-landscape-up) {
            @include font($total-title-desktop-font);
        }
    }

    &__wrapper {
        display: flex;
        flex-direction: column;
        margin-top: 4px * 6;

        @media (--tablet-landscape-up) {
            flex-direction: row;
            margin-left: 4px * 8;
            margin-top: 0;
        }
    }

    &__specs-list {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    &__specs-item {
        align-items: baseline;
        display: flex;
        justify-content: space-between;

        &:not(:first-child) {
            margin-top: 4px * 3;
        }
    }

    &__specs-label {
        color: $total-specs-label-color;
        margin-right: 4px * 6;

        @include font($total-specs-label-font);

        @media (--tablet-landscape-up) {
            max-width: 4px * 25;
        }
    }

    &__specs-value {
        text-align: right;

        @include font($total-specs-value-font);

        &_error {
            color: $total-specs-value-error-color;
        }
    }

    &__amount-list {
        display: flex;
        flex-direction: column;
        justify-content: center;

        &:not(:first-child) {
            margin-top: 4px * 3;

            @media (--tablet-landscape-up) {
                border-left: $total-amount-list-separator-width solid $total-amount-list-separator-color;
                margin-left: 4px * 6;
                margin-top: 0;
                padding-left: 4px * 6;
            }
        }
    }

    &__amount-item {
        align-items: baseline;
        display: flex;
        justify-content: space-between;

        &:not(:first-child) {
            margin-top: 4px * 4;
        }

        &_big {
            align-items: flex-start;
        }
    }

    &__amount-label {
        color: $total-amount-label-color;
        margin-right: 4px * 6;

        @include font($total-amount-label-font);
    }

    &__amount-value {
        color: $total-amount-value-color;
        text-align: right;

        @include font($total-amount-value-font);

        > b {
            color: $total-amount-value-b-color;

            @include font($total-amount-value-b-mobile-font);

            @media (--tablet-landscape-up) {
                @include font($total-amount-value-b-desktop-font);
            }
        }

        > s {
            color: $total-amount-value-s-color;
            display: block;

            @include font($total-amount-value-s-font);
        }
    }

    &__amount-tax {
        color: $total-amount-tax-color;
        margin-top: 2px;

        @media (--tablet-portrait-down) {
            @include font($total-amount-tax-font);
        }
    }

    &__promocode {
        margin-top: 4px * 4;

        @media (--tablet-landscape-up) {
            width: 4px * 85;
        }
    }
}