@import 'https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css';
@import 'https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css';
@import 'https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.min.css';

.App {
    padding: 1rem;
}

.Error,
.Error__explanation {
    color: var(--pico-color-dark);
}

.Error {
    background-color: var(--pico-color-red-400);
}

.Error__explanation,
.Error__stack {
    margin: 0;
}

.AddComment {
    background-color: var(--pico-color-slate-850);
}

.AddComment__header {
    background-color: var(--pico-color-slate-800);
    display: flex;
    align-items: center;
}

.AddComment__header__close {
    margin-left: auto;
    padding: 0 0.25rem;
}

.AddComment__header__close::before {
    content: '\e4f6';
    font-family: 'Phosphor';
}

.AddComment__header__close__label {
    display: none;
}

.AddComment__software-list,
.Comments__list {
    padding: 0;
    margin: 0;
}

.AddComment__comment-url {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.AddComment__comment-url__link {
    word-break: break-all;
}

.AddComment__software-list__item__button {
    padding: 0;
    width: 12rem !important;
}

.Comments__list--children {
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 1px solid var(--pico-color-slate-800);
}

.Comment__header {
    display: flex;
    align-items: center;
    column-gap: 1rem;
}

.Comment__header__avatar {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
}

.Comment__header__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--pico-color-slate-800);
}

.Comment__header__avatar--placeholder-icon::before {
    content: '\e4c2';
    font-family: 'Phosphor';
}

.Comment__header__time {
    font-size: 0.75rem;
    color: var(--pico-color-slate-400);
}

.Comment__header__software {
    margin-left: auto;
    font-size: 0.75rem;
    border-radius: 0.25rem;
}

.Comment__header__software__link {
    color: inherit;
    text-decoration: inherit;
}

.Comment__content--deleted {
    color: var(--pico-color-grey-400);
}

.Comment__footer {
    display: flex;
    align-items: center;
}

.Comment__footer__like-count {
    display: flex;
    align-items: center;
    column-gap: 0.25rem;
}

.Comment__footer__like-count::before {
    content: '\e48e';
    font-family: 'Phosphor';
}

.Comment__footer__reply {
    margin-left: auto;
    padding: 0.25rem;
    font-size: 0.9rem;
    display: flex;
}

.Comment__footer__reply::before {
    content: '\e024';
    font-family: 'Phosphor';
}

.Comment__footer__reply__label {
    margin-left: 0.25rem;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100vw;
    transition: max-width 0.5s;
}

.Comment__footer__reply:not(:hover) .Comment__footer__reply__label {
    max-width: 0;
}