.chat-rooms__list {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.7rem;
}

.chat-rooms__item {
  position: relative;
  padding: .8rem var(--base-p-x);
  transition: var(--default-transition);
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

/*.chat-rooms__item:not(:last-child)::before {*/
.chat-rooms__item::before {
  content: '';
  display: block;
  position: absolute;
  left: var(--base-p-x);
  right: var(--base-p-x);
  bottom: 0;
  height: 1px;
  width: calc(100% - var(--base-p-x) * 2);
  background-color: #E1E1E1;
}

.chat-rooms__item:has(.chat-rooms__message-state.received) {
  background-color: var(--light-pink);
}

@media (hover: hover) and (pointer: fine) {
  .chat-rooms__item:has(.chat-rooms__message-state.received):hover,
  .chat-rooms__item:hover {
    background-color: #FEFAFE;
  }
}

@media (hover: none) and (pointer: coarse) {
  .chat-rooms__item:has(.chat-rooms__message-state.received):hover,
  .chat-rooms__item:active {
    background-color: #FEFAFE;
  }
}

.chat-rooms__item > a {
  position: absolute;
  inset: 0;
}

.chat-rooms__topic {
  font-size: 1.2rem;
  color: var(--purple);
}

.chat-rooms__item-row {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
}

.chat-rooms__name {
  font-weight: 600;
}

.chat-rooms__time {
  font-size: 1rem;
  color: var(--purple);
}

.chat-rooms__message {
  font-weight: 500;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: auto;
  max-width: 80%;
}

.chat-rooms__message.your::before {
  content: var(--you-message);
  font-weight: 300;
  color: #818181;
  display: inline-block;
  padding-right: .5em;
}

.chat-rooms__message-state {
  --side-width: 2.2rem;
  box-sizing: border-box;
  border-radius: calc(var(--side-width) / 2);
  padding: .6rem;
  height: var(--side-width);
  min-width: var(--side-width);
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: normal;
  color: var(--white);
}

.chat-rooms__message-state.received {
  background-color: var(--purple);
}

@supports (not (mask-image: url())) and (not (-webkit-mask-image: url())) {
  .chat-rooms__message-state.read,
  .chat-rooms__message-state.sent {
    color: transparent !important;
    background-image: var(--mask-icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}

@supports (mask-image: url()) or (-webkit-mask-image: url()) {
  .chat-rooms__message-state.read,
  .chat-rooms__message-state.sent {
    background-image: none;
    background-color: currentColor;

    -webkit-mask-image: var(--mask-icon);
    mask-image: var(--mask-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
}

.chat-rooms__message-state.sent {
  font-size: 0;
  color: #818181;
  --mask-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.13949 11.7068C6.02754 11.7117 5.91719 11.6788 5.82616 11.6135L2.83283 9.14016C2.63997 8.96942 2.61094 8.67905 2.76616 8.47349C2.93661 8.28153 3.22473 8.24984 3.43283 8.40016L6.09949 10.5735L13.0995 4.10016C13.3065 3.94474 13.5979 3.97302 13.7712 4.16534C13.9444 4.35767 13.9423 4.65043 13.7662 4.84016L6.47949 11.5735C6.38667 11.6587 6.26546 11.7062 6.13949 11.7068Z' fill='%23818181'/%3E%3C/svg%3E%0A");
}

.chat-rooms__message-state.read {
  font-size: 0;
  color: var(--purple);
  --mask-icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.3335 10.75L5.95266 13.75L12.5002 6.25M16.6668 6.3025L9.5235 13.8025L9.16683 13.3333' stroke='%2390278E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}