/* Desktop short-drama sort presentation: Figma 55224:10972. */
.pc-short-drama-page .pc-filter-row {
  --pc-accent: #FFC000;
}

.pc-short-drama-page .pc-drama-sort {
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  gap: 24px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.pc-short-drama-page .pc-drama-sort::-webkit-scrollbar { display: none; }

.pc-short-drama-page .pc-drama-sort__option {
  position: relative;
  display: block;
  flex: 0 0 96px;
  height: 40px;
  cursor: pointer;
}

.pc-short-drama-page .pc-drama-sort__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.pc-short-drama-page .pc-drama-sort__option span {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  white-space: nowrap;
}

.pc-short-drama-page .pc-drama-sort__option:hover span,
.pc-short-drama-page .pc-drama-sort__option input:checked + span { color: #fff; }

.pc-short-drama-page .pc-drama-sort__option input:checked + span { font-weight: 500; }

.pc-short-drama-page .pc-drama-sort__option:hover span::after,
.pc-short-drama-page .pc-drama-sort__option input:checked + span::after {
  position: absolute;
  bottom: 0;
  left: 38px;
  width: 20px;
  height: 3px;
  border-radius: 999px;
  background: #ffc000;
  content: "";
}

.pc-short-drama-page .pc-drama-sort__option input:focus-visible + span {
  outline: 2px solid #ffc000;
  outline-offset: -2px;
  border-radius: 4px;
}

.pc-short-drama-page .pc-drama-sort[hidden] { display: none; }