event-entry:not([hidden]) {
  &[excluded] {
    display: none;
  }

  & .badges {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    text-transform: uppercase;

    font-weight: bold;
    letter-spacing: 0.1rem;

    & > * {
      display: inline-block;
      padding: 0.5rem 1rem;
      font-size: 0.66rem;
      font-weight: 400;
      line-height: 1;
      color: #fff;
      text-align: center;
      white-space: nowrap;
      border-radius: calc(var(--border-radius) / 2);

      &[data-type="Taller"] {
        background-color: var(--color-yellow);
      }

      &[data-type="Evento"] {
        background-color: var(--color-green);
      }
    }
  }

  & [part="where-and-when"] {
    width: max-content;
    margin-inline: auto;
    align-self: center;
    font-weight: normal;
  }

  & [part="title"],
  & [part="where-and-when"] {
    text-transform: uppercase;
    margin: 0;
  }

  & [part="title"],
  & [part="where-and-when"] {
    &::after {
      content: "";
      display: block;
      border-block-end: 1px solid var(--color);
      margin-block: 0.5rem;
    }
  }

  & [part="title"]::after {
    margin-block-end: 0.25rem;
  }

  & [part="buttons"] {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }

  & details {
    & summary {
      display: var(--summary-display, revert);
      cursor: pointer;
      position: relative;

      &::-webkit-details-marker {
        display: none;
      }
    }
  }

  & [part="description"] {
    word-break: break-word;
    text-wrap: balance;
    text-align: start;
    margin-block: 0.5rem 0;
  }

  & [part="button"] {
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    transition-duration: 0.2s;
    padding: 0.5rem 0.5rem 0;
    border: none;
    background: none;
    outline: none;

    &:hover,
    &:focus {
      background-color: color-mix(in srgb, var(--color, currentColor) 10%, transparent);
    }
  }
}