rahmanda/ayu

// =====================================================
// Callout - colorful box
// =====================================================
// Use it for alert or notification on your page
// "We style it because the built-in is suck"

$callout-prefix: "callout";
$theme-callout-enable: false !default;

@if ($theme-callout-enable == true) {

.#{$callout-prefix} {
    @include border($theme-border-size,
                    $theme-border-style,
                    map-get($theme-color-callout-gray, foreground),
                    $theme-border-radius);

    font-size: map-get($theme-font-size, medium);
    font-family: $theme-font-family;

    color: map-get($theme-color-callout-gray, foreground);
    background: map-get($theme-color-callout-gray, background);

    padding: map-get($theme-callout-padding, medium);
    box-sizing: border-box;

    width: $theme-callout-width;


    &--notification {
        position: fixed;
        top: $theme-callout-position-top;
        left: 0;
        right: 0;
        transition: $theme-callout-transition;
        margin: 0 auto;

        &.is-show {
            top: $theme-callout-position-show-top;
        }
    }

    // -----------------------------------------------------
    // Color Variant
    // -----------------------------------------------------

    &--red {
        border-color: map-get($theme-color-callout-red, foreground);
        background: map-get($theme-color-callout-red, background);
        color: map-get($theme-color-callout-red, foreground);
    }

    &--green {
        border-color: map-get($theme-color-callout-green, foreground);
        background: map-get($theme-color-callout-green, background);
        color: map-get($theme-color-callout-green, foreground);
    }

    &--yellow {
        border-color: map-get($theme-color-callout-yellow, foreground);
        background: map-get($theme-color-callout-yellow, background);
        color: map-get($theme-color-callout-yellow, foreground);
    }

    // -----------------------------------------------------
    // Size Variant
    // -----------------------------------------------------

    &--large {
        padding: map-get($theme-callout-padding, large);
    }

    &--x-large {
        padding: map-get($theme-callout-padding, x-large);
    }

    &--block {
        width: 100%;
    }

}

}