// Name:            Descriptions
// Description:     Component to style descriptions
//
// Component:       `uk-descriptions`
//
// ========================================================================

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

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


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

@use '../mixins' as *;


@mixin descriptions-styles {
    /* ========================================================================
       Component: Descriptions
     ========================================================================== */

    .#{$prefix}-descriptions-item {
        @if map.has-key($mixins, 'hook-descriptions-item') {
            @include meta.apply(map.get($mixins, 'hook-descriptions-item'));
        }
    }

    .#{$prefix}-descriptions-item > ::before { display: none }

    .#{$prefix}-descriptions-item-term {
        color: var(--descriptions-item-term-color);
        @if map.has-key($mixins, 'hook-descriptions-item-term') {
            @include meta.apply(map.get($mixins, 'hook-descriptions-item-term'));
        }
    }

    .#{$prefix}-descriptions-item-description {
        @if map.has-key($mixins, 'hook-descriptions-item-description') {
            @include meta.apply(map.get($mixins, 'hook-descriptions-item-description'));
        }
    }

    @content;
}

@mixin descriptions-tokens {
    --descriptions-item-term-color: var(--global-muted-color);
    @content;
}