@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

[x-cloak] {
    display: none !important;
}

/* vertical line to the left of the comments */
.comments-container::before {
    position: absolute;
    display: block;
    top: 0;
    left: -40px;
    content: "";
    width: 3px;
    height: 100%;
    background: #edf0f5;
}

.is-status-update.comment-container:last-child::after {
    left: -41px;
}

/* horizontal line to the left of the comments */
.comment-container::before {
    position: absolute;
    display: block;
    top: 57px;
    content: "";
    width: 23px;
    height: 3px;
    background: #edf0f5;
    left: -40px;
}

/* remove last vertical line */
.comment-container:last-child::after {
    position: absolute;
    display: block;
    top: 60px;
    left: -40px;
    content: "";
    width: 3px;
    height: calc(100% - 60px);
    background: theme('colors.gray-background');
}

.is-status-update::before {
    position: absolute;
    width: 38px;
    height: 38px;
    border-radius: 38px;
    border: 7px solid white;
    box-shadow: 4px 4px 15px 0 rgba(36, 37, 38, 0.08);
    left: -58px;
    background: theme('colors.purple');
    opacity: 1;
    z-index: 1;
}

.is-status-update {
    border-width: 1px;
    border-image-source: linear-gradient(266deg, #21c8f6 98%, #637bff -52%);
    background-image: linear-gradient(to bottom, #ffffff, #ffffff), linear-gradient(266deg, #21c8f6 98%, #637bff -52%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.status-open, .status-open:before {
    @apply bg-gray-200;
}

.status-considering, .status-considering:before {
    @apply bg-purple text-white;
}

.status-in-progress, .status-in-progress:before {
    @apply bg-yellow text-white;
}

.status-implemented, .status-implemented:before {
    @apply bg-green text-white;
}

.status-closed, .status-closed:before {
    @apply bg-red text-white;
}