@use '../function' as *;
@use '../settings';
@use 'sass:color';

@mixin roolith-box() {
    .box {
        border: rem(1) solid var(--r-box-border-color);
        border-radius: calc(var(--r-box-border-radius) * 2);
        background: var(--r-box-background-color);
    }

    .box-header,
    .box-body,
    .box-footer {
        padding: calc(var(--r-box-spacing) - #{rem(5)}) var(--r-box-spacing);
    }

    .box-header {
        font-size: rem(14);
        line-height: rem(18);
        font-weight: var(--r-global-font-bold-weight);
        padding-bottom: 0;
        color: var(--r-box-header-text-color);
    }

    .box-body {
        font-size: rem(14);
        line-height: rem(22);
    }

    .box-footer {
        color: var(--r-box-footer-color);
        padding-top: 0;
        font-size: 80%;
    }

    .box-small {
        .box-header,
        .box-body,
        .box-footer {
            padding: calc(var(--r-box-spacing-small) - #{rem(6)}) var(--r-box-spacing-small);
        }

        .box-header,
        .box-footer {
            font-size: rem(12);
            line-height: rem(16);
        }

        .box-footer {
            padding-top: 0;
        }

        .box-header {
            padding-bottom: 0;
        }

        .box-body {
            font-size: rem(12);
            line-height: rem(18);
        }
    }

    .box-large {
        .box-header,
        .box-body,
        .box-footer {
            padding: calc(var(--r-box-spacing-large) - #{rem(10)}) var(--r-box-spacing-large);
        }

        .box-header,
        .box-footer {
            font-size: rem(16);
            line-height: rem(20);
        }

        .box-footer {
            padding-top: 0;
        }

        .box-header {
            padding-bottom: 0;
        }

        .box-body {
            font-size: rem(16);
            line-height: rem(26);
        }
    }

    @each $name, $value in settings.$colors {
        @if ($name != white) {
            .box-#{'' + $name} {
                border: rem(1) solid color-darken(var(--r-color-#{$name}), 5%);

                .box-body {
                    color: color-darken(var(--r-color-#{$name}), 10%);
                }

                .box-header {
                    color: var(--r-color-#{$name});
                    border-color: color-darken(var(--r-color-#{$name}), 5%);
                }

                .box-footer {
                    border-top: none;
                    padding-top: 0;
                    font-size: 80%;
                    color: color-lighten(var(--r-color-#{$name}), 25%);
                }
            }
        }
    }
}