@import '../core/theme';
@import '../../helpers/_selectors';

/* A collection of modifiers that extend control styling */
#{$button-selectors} {
    &.btn--pilled {
        border-radius: 6.25rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* btn--circle: contents must be placed inside child element */
#{$button-selectors} {
    &.btn--circle {
        border-radius: 100%;
        min-width: 60px;
        overflow: hidden;
        padding: 0;
        text-align: center;

        &:before {
            content: '';
            display: inline-block;
            vertical-align: middle;
            padding-top: 100%;
        }

        * {
            display: inline;
            max-width: 90%;
            vertical-align: middle;
            white-space: pre-wrap;
        }
    }
}

/* Input (primary text-based) controls apply to inputs */
.input-control--pilled {
    border-radius: 6.25rem !important;
}

/* Theme modifiers */

/* GLOBAL THEME SELECTORS */
/* v1 */
$themes: primary, success, warning, danger, light, dark, link, link-dark, info;

@each $theme in $themes {
    .bg-#{$theme} {
        background-color: var(--cirrus-#{$theme}) !important;
    }

    .text-#{$theme} {
        border-color: var(--cirrus-#{$theme}) !important;
        color: var(--cirrus-#{$theme}) !important;
    }
}

/* v2 */
$palettes: (
    'pink': $pinks,
    'red': $reds,
    'orange': $oranges,
    'yellow': $yellows,
    'green': $greens,
    'teal': $teals,
    'blue': $blues,
    'indigo': $indigos,
    'purple': $purples,
    'gray': $grays,
);

@each $name, $palette in $palettes {
    @each $level, $color in $palette {
        .bg-#{$name}-#{$level} {
            background-color: #{$color} !important;
        }

        .text-#{$name}-#{$level} {
            border-color: #{$color} !important;
            color: #{$color} !important;
        }
    }
}