// Name:            Composed control
// Description:     Component to style composed control
//
// Component:       `uk-composed-control`
//
// ========================================================================

@use 'sass:map';
@use 'sass:meta';

@use '@broxus/react-uikit/styles/variables' as *;


// Variables
// ========================================================================

@use '../mixins' as *;


@mixin composed-control-styles {
    /* ========================================================================
       Component: Composed control
     ========================================================================== */

    .#{$prefix}-composed-control {
        background: var(--control-background);
        border: var(--control-border-width) var(--control-border-style) var(--control-border);
        box-sizing: border-box;
        display: block;
        padding: var(--global-small-gutter) var(--global-gutter);
        @if map.has-key($mixins, 'hook-composed-control') {
            @include meta.apply(map.get($mixins, 'hook-composed-control'));
        }

        &.#{$prefix}-success:not(.#{$prefix}-disabled) {
            border-color: var(--form-success-color);
            @if map.has-key($mixins, 'hook-composed-control-success') {
                @include meta.apply(map.get($mixins, 'hook-composed-control-success'));
            }
        }

        &.#{$prefix}-warning:not(.#{$prefix}-disabled) {
            border-color: var(--form-warning-color);
            @if map.has-key($mixins, 'hook-composed-control-warning') {
                @include meta.apply(map.get($mixins, 'hook-composed-control-warning'));
            }
        }

        &.#{$prefix}-danger:not(.#{$prefix}-disabled) {
            border-color: var(--form-danger-color);
            @if map.has-key($mixins, 'hook-composed-control-danger') {
                @include meta.apply(map.get($mixins, 'hook-composed-control-danger'));
            }
        }

        .#{$prefix}-control,
        .#{$prefix}-datepicker {
            background: none !important;
            border: 0 none;
            color: var(--global-color);
            font-size: var(--global-large-font-size);
            padding: 0 !important;
            @if map.has-key($mixins, 'hook-composed-control-input') {
                @include meta.apply(map.get($mixins, 'hook-composed-control-input'));
            }
        }

        .#{$prefix}-composed-control-label {
            color: var(--global-muted-color);
            @if map.has-key($mixins, 'hook-composed-control-label') {
                @include meta.apply(map.get($mixins, 'hook-composed-control-label'));
            }
        }
    }

    @content;
}

@mixin composed-control-tokens {
    @content;
}