rahmanda/ayu

// =====================================================
// Flag
// =====================================================
// This is basically a meta component to help you
// adjusting content layout like this
// ##### ~~~~~~~ Legend: # can be an icon or image or anything
// #   # ~~~~~~~         ~ can be a text or anything
// ##### ~~ ~~~~
// The different is you can adjust vertical alignment of
// the object you store inside of #, and the rest of content
// you place at ~ will fill the remaining space (using display table)
// Reference: https://csswizardry.com/2013/05/the-flag-object/

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

@if ($theme-flag-enable == true) {
.#{$flag-prefix} {
    display: table;
    width: 100%;

    &__head,
    &__body {
        display: table-cell;
        vertical-align: middle;
    }
}

.#{$flag-prefix}--top {
    .#{$flag-prefix}__head,
    .#{$flag-prefix}__body {
        vertical-align: top;
    }
}

.#{$flag-prefix}--bottom {
    .#{$flag-prefix}__head,
    .#{$flag-prefix}__body {
        vertical-align: bottom;
    }
}
}