@import 'scss/styles.scss';

.vehicle-list-container {
    padding: 6px;
    border-radius: 3px;
    max-width: 340px;
    background: $white-2;

    /* Search */

    .vehicle-list-search {
        margin-bottom: 4px;
    }

    .vehicle-list-header,
    .vehicle-list-body-item {
        grid-template-columns: 60px 42px 34px auto;
        grid-gap: 26.67px;

        @media (max-width: 1440px) {
            grid-gap: 12px;
        }
    }

    /* Header */

    .vehicle-list-header {
        padding: 6px;
        padding-bottom: 12px;
        border-bottom: 1px solid $bw-9;
        margin-bottom: 6px;
    }

    /* Body */

    .vehicle-list-body {
        &-item {
            padding: 8px 6px;
            margin-bottom: 2px;
            border-radius: 2px;
            transition: background 0.2s ease-in-out;

            &:hover {
                background: $bw2;
            }

            .vehicle-unit-container {
                cursor: pointer;

                &:hover {
                    p {
                        color: $ta-blue-15 !important;
                    }
                }

                p {
                    transition: color 0.2s ease-in-out;
                }
            }

            .vehicle-type-container {
                .vehicle-icon {
                    height: 18px;

                    svg {
                        height: 18px;
                    }
                }
            }
        }
    }

    /* Footer */

    .vehicle-list-footer {
        padding: 6px 6px 0 6px;
        margin-top: 4px;
        border-top: 1px solid $bw-9;
    }
}