@import 'scss/styles.scss';

.title-card {
    cursor: pointer;
    padding: 5px 8px;
    height: 34px;
    background-color: transparent;
    transition: background-color 0.2s ease-in-out;
    &:hover {
        background-color: $bw2;
    }
}

.input-custom-group {
    display: block;
    position: relative;
}

.input-class {
    color: $white;

    width: 100%;
    height: 34px;
    border: none;
    outline: none;
    padding: 6px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &::placeholder {
        color: $bw6-2;
        font-weight: 700;
        line-height: 22;
        vertical-align: middle;
    }
}

.input-dropdown-arrow {
    display: inline-block;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 10;
    cursor: pointer;
    transition: 0.3s ease-in-out;

    svg {
        transform: rotate(0deg);
        transition: 0.3s ease-in-out;
    }

    &.focus {
        svg {
            transform: rotate(180deg);
            transition: 0.3s ease-in-out;
        }
    }
}

.dropdown-container {
    padding: 4px;

    overflow-y: scroll !important;
    padding-right: 0 !important;

    position: relative;
    top: 0;
    left: 0;
    z-index: 1000;
    max-height: 190px;
    width: 100%;

    &::-webkit-scrollbar {
        background-color: #2f2f2f;
        border-radius: 0 3px 3px 0;
        width: 6px;
    }

    &::-webkit-scrollbar-thumb {
        background-color: #919191;
        width: 2px;
        border: 2px solid #2f2f2f;
        border-radius: 3px;
    }
}

.arrows {
    span {
        height: 26px;
        width: 26px;

        background: transparent;
        transition: background-color 0.2s ease-in-out;

        .arrow-right,
        .arrow-left {
            svg {
                path {
                    fill: $grey;
                }
            }
        }

        &:not(.disable-next-arrow, .disable-previous-arrow) {
            &:hover {
                background: $bw2;
                border-radius: 2px;
                cursor: pointer;
                .arrow-right,
                .arrow-left {
                    svg {
                        path {
                            fill: $ta-black;
                        }
                    }
                }
            }
        }
    }
    .arrow-left {
        cursor: pointer;
        padding: 0 4px;
    }
    .arrow-right {
        cursor: pointer;
        padding: 0 4px;

        svg {
            transform: rotate(-180deg);
        }
    }

    .disable-next-arrow,
    .disable-previous-arrow {
        opacity: 0.5;
        cursor: default !important;

        svg-icon {
            cursor: default !important;
        }

        &:hover {
            background-color: transparent !important;
        }
    }
}