@use 'src/views/styles/colors.module.scss';

.row {
    > td:first-child {
        padding-left: 12px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    > td:last-child {
        padding-right: 12px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    > * {
        transition: background-color 0.1s ease-in-out;
    }
    .conflictTooltip {
        position: relative;
        display: none;

        .body {
            position: absolute;
            left: 40px;
            display: flex;
            flex-direction: column;
            background: black;
            padding: 8px;
            width: 120px;
            border-radius: 0px 5px 5px 0px;
            opacity: 0.5;
            div {
                color: white !important;
                text-decoration: none !important;
                font-weight: normal !important;
            }
        }
    }
    &:hover {
        .conflictTooltip {
            display: initial;
        }
    }

    // :global(ul.flag) li {
    //     transform: scale(1.5); // omg the flags are on ONE LONG GIF FILE AND SHIFTED BY Y COORDINATES
    // }
}

.rowButton {
    margin: 0.25rem 0;
    &:active {
        transform: scale(0.92);
    }
    width: 32px;
    height: 32px;
    place-items: center;
    display: inline-flex;
}

.selectedRow {
    > * {
        background: colors.$burnt_orange !important;
        color: white !important;
        box-shadow: none !important;
    }
    .rowButton {
        background: colors.$burnt_orange !important;
        box-shadow: none !important;
    }
}

.inActiveSchedule {
    > *:not(td:last-child) {
        color: colors.$turtle_pond !important;
        font-weight: bold !important;
    }
}

// for the edge case where they have conflicting classes in their schedule
.isConflict:not(.inActiveSchedule) {
    > *:not(td:last-child) {
        color: colors.$speedway_brick;
        font-weight: normal;
        text-decoration: line-through;
    }
}

.isConflictNoLineThrough:not(.inActiveSchedule) {
    > *:not(td:last-child) {
        color: colors.$speedway_brick;
        font-weight: normal;
    }
}