// =============================================================================
// 31-modules / divider / mixins
// =============================================================================

@use "sass:map";
@use "./divider.config" as config;
@use "../../01-core/external" as *;

@mixin ss-divider {
    border: 0;
    border-top: map.get(config.$divider-config, "thickness") solid
        map.get(config.$divider-config, "color");
    margin: map.get(config.$divider-config, "spacing") 0;
    height: 0;
    width: 100%;
}

@mixin ss-divider-vertical {
    border: 0;
    border-left: map.get(config.$divider-config, "thickness") solid
        map.get(config.$divider-config, "color");
    margin: 0 map.get(config.$divider-config, "spacing");
    width: 0;
    height: auto;
    align-self: stretch;
    display: inline-block;
}

@mixin ss-divider-dashed {
    border-top-style: dashed;
}

@mixin ss-divider-dotted {
    border-top-style: dotted;
}

@mixin ss-divider-with-label {
    display: flex;
    align-items: center;
    gap: map.get(config.$divider-config, "label-padding");
    color: map.get(config.$divider-config, "label-color");
    margin: map.get(config.$divider-config, "spacing") 0;
    font-size: map.get(config.$divider-config, "label-font-size");

    &::before,
    &::after {
        content: "";
        flex: 1 1 auto;
        border-top: map.get(config.$divider-config, "thickness") solid
            map.get(config.$divider-config, "color");
    }
}

/// Thin weight (horizontal).
@mixin ss-divider-thin {
    border-top-width: map.get(config.$divider-config, "thickness-thin");
    border-top-color: map.get(config.$divider-config, "color-thin");
}

/// Thick weight (horizontal).
@mixin ss-divider-thick {
    border-top-width: map.get(config.$divider-config, "thickness-thick");
}

/// Thin weight (vertical).
@mixin ss-divider-vertical-thin {
    border-left-color: map.get(config.$divider-config, "color-thin");
}

/// Thick weight (vertical).
@mixin ss-divider-vertical-thick {
    border-left-width: map.get(config.$divider-config, "thickness-thick");
}