@import "../../variables";

$svgWidth: 11px;
$svgHeight: 18px;

.sz-select {
    display: inline-block;
    margin: $margin;

    .sz-html-input {
        margin: 0;
    }

    .label-with-element-container {
        display: flex;
    }

    .select-div-container {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .input-native {
        cursor: default;
        max-width: calc(100% - #{$svgWidth} - 3px);

        &::placeholder {
            color: $color-grey-500;
        }

        .sz-icon {
            svg {
                width: $svgWidth;
                height: $svgHeight;
            }
        }
    }

    .sz-list {
        margin: 0;
        position: absolute;
        //left: 50px;
        //top: 100%; // computed in sz-select.component.ts by window.innerHeight
        background-color: white;
        width: 100%;
        z-index: 1000;
    }
}