@use "../../../variables" as *;

$colors-map: (primary, secondary, success, info, warning, danger);

.#{$prefix}theme-centurion {
    .#{$prefix}toolbar {
        --#{$prefix}toolbar-background: var(--#{$prefix}white-color);

        --#{$prefix}toolbar-title-font-weight: 500;

        & > .#{$prefix}surface {
            --#{$prefix}surface-color: white;
            --#{$prefix}surface-opacity: 1;
        }

        &--bordered > .#{$prefix}outline-b {
            --#{$prefix}outline-border-width: 1px;
            --#{$prefix}outline-border-color: #ddd;
        }

        &--sm {
            --#{$prefix}toolbar-height: 28px;
            --#{$prefix}toolbar-padding-y: 0;
            --#{$prefix}toolbar-padding-x: 10px;

            --#{$prefix}toolbar-title-font-size: 11px;
            --#{$prefix}toolbar-title-line-height: 16px;
            --#{$prefix}toolbar-subtitle-font-size: 10px;
            --#{$prefix}toolbar-subtitle-line-height: 14px;
        }

        &--md {
            --#{$prefix}toolbar-height: 32px;
            --#{$prefix}toolbar-padding-y: 0;
            --#{$prefix}toolbar-padding-x: 12px;
            --#{$prefix}toolbar-gap: 10px;
            --#{$prefix}toolbar-content-gap: 8px;

            --#{$prefix}toolbar-title-font-size: 12px;
            --#{$prefix}toolbar-title-line-height: 18px;
            --#{$prefix}toolbar-title-font-weight: 400;
            --#{$prefix}toolbar-title-color: #000;
            --#{$prefix}toolbar-subtitle-font-size: 11px;
            --#{$prefix}toolbar-subtitle-line-height: 16px;
        }

        &--md .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
            --#{$prefix}icon-font-size-default: 18px;
        }

        &--lg {
            --#{$prefix}toolbar-height: 36px;
            --#{$prefix}toolbar-padding-y: 0;
            --#{$prefix}toolbar-padding-x: 14px;

            --#{$prefix}toolbar-title-font-size: 14px;
            --#{$prefix}toolbar-title-line-height: 20px;
            --#{$prefix}toolbar-subtitle-font-size: 12px;
            --#{$prefix}toolbar-subtitle-line-height: 18px;
        }

        & > .#{$prefix}surface {
            background: linear-gradient(to bottom, #fafcfd 0%, #e7f0fa 50%, #dce7f5 50%, #dce7f5 100%);
        }
    }

    .#{$prefix}toolbar--filled {
        --#{$prefix}toolbar-color: var(--#{$prefix}white-color);
    }

    @each $color in $colors-map {
        .#{$prefix}toolbar--filled.#{$prefix}toolbar--#{$color} > .#{$prefix}surface {
            --#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
            --#{$prefix}surface-opacity: 1;
        }
    }
}