@use "../../abstracts/vars" as *;
@use "../../abstracts/mixins" as *;
@use "../../base/fontawesome/font-awesome-mix-var" as *;

.variant-selector {
    &.component {
        margin: 30px 0 0 0;
    }
    .component-content {
        >div {
            height: 30px;
            display: inline-block;
            width: 30px;
            margin: 2px;
            cursor: Pointer;
        }
    }
    .variant-option {
        @include fa-icon();
        &::before {
            content: $fa-var-th;
            display: block;
            height: 100%;
            font-size: 30px;
            width: 100%;
            text-align: center;
        }
        &.active-variant {
            color: $serach-selector-variant-color-active;
        }
        &.horizontal {
            &::before {
                content: $fa-var-th-large;
            }
            &.active-variant {
                color: $serach-selector-variant-color-active;
            }
        }
        &.vertical {
            &::before {
                content: $fa-var-bars;
            }
            &.active-variant {
                color: $serach-selector-variant-color-active;
            }
        }
    }
}