.my-videos details summary {
  color: var(--background-light);
}

.my-videos form {
  border: 1px solid var(--foreground);
  margin: 0 auto;
  max-width: 25em;
}

.file-input {
  cursor: pointer;
  position: relative;
  transform: unset;
  height: 3lh;
}
.file-input:has(input[type=file]:focus-visible) {
  outline: .25rem solid var(--foreground);
  outline-offset: .1rem;
  outline-style: dotted;
}
.file-input::before {
  align-items: center;
  background-color: var(--foreground);
  border-top-left-radius: .3em;
  border-bottom-left-radius: .3em;
  color: white;
  content: attr(data-label);
  display: flex;
  padding: .5em;
  position: absolute;
  inset: 0;
  right: 65%;
  text-transform: uppercase;
}
.file-input::after {
  background-color: #00000044;
  backdrop-filter: blur(2px);
  border-top-right-radius: .3em;
  border-bottom-right-radius: .3em;
  content: "";
  position: absolute;
  inset: 0;
  left: 35%;
}
.my-videos input[type=file] {
  cursor: pointer;
  opacity: 0;
  width: 100%;
  height: 100%;
}
.file-input__filename {
  align-items: center;
  color: var(--main);
  display: flex;
  font-size: .9rem;
  padding-left: .5em;
  opacity: .8;
  position: absolute;
  inset: 0;
  left: 35%;
  z-index: 1;
}

.my-videos__hint {
  color: var(--main);
}

.my-videos__container {
  display: grid;
  margin-top: 3em;
}
@media (min-width: 67.5em) {
  .my-videos__container {
    grid-template-columns: auto 1fr;
  }
}

.my-videos__player {
  align-self: start;
  justify-self: center;
  max-width: 67.5em;
}
@media (min-width: 45em) {
  .my-videos__player {
    margin-inline: 1em;
  }
  .my-videos__player video {
    border-radius: 1em;
  }
}

@media (min-width: 67.5em) {
  .my-videos__list {
    min-width: 25em;
  }
}

.my-videos__container ul {
  color: var(--background-light);
  margin-inline: 1em;
}
.my-videos__container ul:before {
  color: var(--background-light);
  content: attr(data-prefix) " " attr(data-period);
  font-size: 1.2rem;
  font-weight: bold;
}
.my-videos__container li {
  border-top: 1px solid var(--foreground);
  border-radius: .15em;
  cursor: pointer;
  display: grid;
  gap: .5em;
  grid-template-columns: auto 1fr 1fr;
  margin-top: 1.5em;
  padding: .5em;
}
.my-videos__container li:nth-child(2n) {
  background-color: rgba(0, 0, 0, .2);
  backdrop-filter: blur(50px);
}
.my-videos__container li img {
  grid-row: span 2;
  width: auto;
  height: 3lh;
}

.my-videos__title {
  font-size: 1.1rem;
  font-weight: bold;
  grid-column: span 2;
  word-break: break-all;
}
.my-videos__title:hover {
  color: var(--foreground);
  text-decoration: underline;
}

:where(.my-videos__duration, .my-videos__uploaded-at) {
  align-self: end;
  font-size: .9rem;
}

.my-videos__feedback {
  align-self: start;
  color: var(--background-light);
  grid-column: span 3;
  text-decoration: underline;
}
.my-videos__feedback:hover {
  color: var(--foreground);
}
.my-videos__feedback svg {
  margin-right: .5em;
  width: auto;
  height: 1lh;
  transform: translateY(.15em);
}
.my-videos__feedback :where(polygon, rect) {
  fill: var(--background-light);
}
.my-videos__feedback:hover :where(polygon, rect) {
  fill: var(--foreground);
}