src/renderer/components/select/select.scss
.select {
    position: relative;

    .input {
        border: none;
        height: 40px;
        font-weight: bold;
        text-align: right;
        background-color: rgba(0, 0, 0, 0);
        cursor: pointer;
        user-select: none;
        outline: none;
        padding: 0 42px 0 14px;
    }

    .iconWrapper {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(-100%, calc(-50% - -1px));
        cursor: pointer;
    }

    .iconWrapper:hover + .input,
    .input:hover {
        background-color: rgba(0, 0, 0, 0.3);
    }

    .input:active,
    .input.active {
        background-color: rgba(0, 0, 0, 0.4);
    }

    .dropdown {
        height: 0;
        min-width: 100%;
        overflow: hidden;
        transition: 0.8s ease-in-out;
        position: absolute;
        top: 100%;
        left: 0;
        cursor: pointer;
        z-index: 2;

        .option {
            padding: 10px 6px;
            background-color: $selectOptionBgColor;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .option.active {
            background-color: $selectOptionBgColorHover;
        }
    }

    .dropdown.visible {
        height: initial;
    }
}
