[eid] {
    position:relative
}

#event-list [eid].list-item > * {
    padding-right:0 !important
}

[eid] img {
    width: 70px;
    object-fit: cover;
}

[data='name'] {
    font-family: var(--font-title);
    font-weight: bold;
}

[data='description'] {
    color: var(--color-grey );  
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    display: -webkit-box;
}

[datad='remaining'] {
    padding:5px 10px;
    border:1px solid var(--color-green);
    color:var(--color-green);
    border-radius: 30px;
    width: max-content;
    font-size: 0.6rem;
}

[datad='remaining'][value='yellow'] {
    border:1px solid var(--color-yellow);
    color:var(--color-yellow);
}

[datad='remaining'][value='grey'] {
    border:1px solid var(--color-grey);
    color:var(--color-grey);
}

[datad='remaining'][value='red'] {
    border:1px solid var(--color-red);
    color:var(--color-red);
}

[datad='participant'] {
    color:var(--color-blue)
}

.event-action {
    display:none;
    position:absolute;
    inset:0 0 0 0;
    background-color: white;
}

[eid].selected .event-action {
    display:flex;
}

.event-action .button {  
    padding: 10px;
  display: flex;
  align-items: center;
}

[eid='-1'] .button.red,
[eid='-1'] .button.green,
[eid='-1'] [data='date'],
[eid='-1'] [datad='remaining'] {
    display:none
}