@import 'theme/variables.scss';
@import 'scss/mixins.scss';
@import 'scss/styles.scss';
@import 'scss/text-size.scss';

.status-time-container {
    padding: 6px;
    border-radius: 2px;

    &.title-card-dropdown {
        padding: 2px 4px;
    }

    &.status-with-time {
        &:hover,
        &.hover {
            padding: 0 0 0 6px;
            .status-time {
                display: flex;
            }
        }
    }

    &.dispatch-status {
        &.dispatch-status-with-time {
            &:hover {
                padding: 0 0 0 6px;
                .dispatch-status-time {
                    display: flex;
                }
            }
        }

        &.dispatch-show-time-always {
            padding: 0 0 0 6px;
            .dispatch-status-time {
                display: flex;
            }
        }
    }

    &.no-style {
        padding: 0;
        cursor: unset;
    }

    &:focus {
        .status-time {
            color: rgb($white, 0.7);
        }
    }
}

.status-text {
    color: $ta-black;
    @include prevent-text-selection();
}

.status-text-dropdown {
    color: rgb($white, 0.7);
    @include prevent-text-selection();
}

.badge {
    height: 14px;
    width: 14px;
    border-radius: 1px;
}

.default-hover-focus {
    &:not(.dropdown-status-change) {
        &.color-background {
            &-magenta-bold {
                @include load-status-states($ta-red-19);
            }
            &-black-200 {
                @include load-status-states($bw6-2);
            }
            &-lime-bold {
                @include load-status-states($ta-green-1);
            }
            &-blue-bold {
                @include load-status-states($ta-blue-14);
            }
            &-green-bold {
                @include load-status-states($ta-green-2);
            }
            &-orange-bold {
                @include load-status-states($ta-orange-1);
            }
            &-gold-bold {
                @include load-status-states($gold-bold);
            }
            &-red-bold {
                @include load-status-states($ta-red-11);
            }
            &-brown-bold {
                @include load-status-states($brown-bold);
            }
            &-purple-bold {
                @include load-status-states($purple-4);
            }
            &-yellow-bold {
                @include load-status-states($ta-yellow-5);
            }
        }
    }
}

.dispatch-status {
    &:not(.dropdown-status-change) {
        &.color-background {
            &-magenta-bold {
                @include dispatch-status-states($ta-red-19);
            }
            &-black-200 {
                @include dispatch-status-states($bw6-2);
            }
            &-lime-bold {
                @include dispatch-status-states($ta-green-1);
            }
            &-blue-bold {
                @include dispatch-status-states($ta-blue-14);
            }
            &-green-bold {
                @include dispatch-status-states($ta-green-2);
            }
            &-orange-bold {
                @include dispatch-status-states($ta-orange-1);
            }
            &-gold-bold {
                @include dispatch-status-states($gold-bold);
            }
            &-red-bold {
                @include dispatch-status-states($ta-red-11);
            }
            &-brown-bold {
                @include dispatch-status-states($brown-bold);
            }
            &-purple-bold {
                @include dispatch-status-states($purple-4);
            }
            &-yellow-bold {
                @include dispatch-status-states($ta-yellow-5);
            }
        }
    }
}

.dropdown-status-change {
    &.color-background {
        &-magenta-bold {
            @include load-status-dropdown-change-states($ta-red-19);
        }
        &-black-200 {
            @include load-status-dropdown-change-states($bw6-2);
        }
        &-lime-bold {
            @include load-status-dropdown-change-states($ta-green-1);
        }
        &-blue-bold {
            @include load-status-dropdown-change-states($ta-blue-14);
        }
        &-green-bold {
            @include load-status-dropdown-change-states($ta-green-2);
        }
        &-orange-bold {
            @include load-status-dropdown-change-states($ta-orange-1);
        }
        &-gold-bold {
            @include load-status-dropdown-change-states($gold-bold);
        }
        &-red-bold {
            @include load-status-dropdown-change-states($ta-red-11);
        }
        &-brown-bold {
            @include load-status-dropdown-change-states($brown-bold);
        }
        &-purple-bold {
            @include load-status-dropdown-change-states($purple-4);
        }
        &-yellow-bold {
            @include load-status-dropdown-change-states($ta-yellow-5);
        }
    }
}

.load-status-no-states {
    &.color-background {
        &-magenta-bold {
            @include load-status-no-states($ta-red-19);
        }
        &-black-200 {
            @include load-status-no-states($bw6-2);
        }
        &-lime-bold {
            @include load-status-no-states($ta-green-1);
        }
        &-blue-bold {
            @include load-status-no-states($ta-blue-14);
        }
        &-green-bold {
            @include load-status-no-states($ta-green-2);
        }
        &-orange-bold {
            @include load-status-no-states($ta-orange-1);
        }
        &-gold-bold {
            @include load-status-no-states($gold-bold);
        }
        &-red-bold {
            @include load-status-no-states($ta-red-11);
        }
        &-brown-bold {
            @include load-status-no-states($brown-bold);
        }
        &-purple-bold {
            @include load-status-no-states($purple-4);
        }

        &-yellow-bold {
            @include load-status-no-states($ta-yellow-5);
        }
    }
}

.load-status-card {
    &.color-background {
        &-magenta-bold {
            @include load-status-card(
                $ta-red-19,
                $ta-red-18,
                $ta-red-19,
                $ta-red-23
            );
        }
        &-black-200 {
            @include load-status-card(
                $bw6-2,
                $ta-light-grey-2,
                $muted,
                $ta-light-grey-6
            );
        }
        &-lime-bold {
            @include load-status-card(
                $ta-green-1,
                $ta-green-6,
                $ta-green-1,
                $ta-green-8
            );
        }
        &-blue-bold {
            @include load-status-card(
                $ta-blue-14,
                $ta-blue-13,
                $ta-blue-14,
                $ta-blue-19
            );
        }
        &-green-bold {
            @include load-status-card(
                $ta-green-2,
                $ta-green,
                $ta-green-2,
                $ta-green-4
            );
        }
        &-orange-bold {
            @include load-status-card(
                $ta-orange-1,
                $ta-orange-4,
                $ta-orange-1,
                $ta-orange-3
            );
        }
        &-gold-bold {
            @include load-status-card(
                $gold-bold,
                $ta-yellow-8,
                $gold-bold,
                $gold-subtle
            );
        }
        &-red-bold {
            @include load-status-card(
                $ta-red-11,
                $ta-red-10,
                $ta-red-11,
                $ta-red-13
            );
        }
        &-yellow-bold {
            @include load-status-card(
                $ta-yellow-5,
                $ta-yellow-1,
                $ta-yellow-5,
                $ta-yellow-4
            );
        }
    }
}

.status-time,
.dispatch-status-time {
    display: none;
    color: $bw6-2;
    @include prevent-text-selection();
}

.status,
.dispatch-status-time,
.status-time {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

.table-big-status {
    border-radius: 1px;
    padding: 8px;
}