@media screen and (max-width: 59.9375em) {
  .csc-dropdown--header {
    display: none;
  }
}

@media screen and (min-width: 60em) {
  .csc-dropdown--sidebar {
    display: none !important;
  }
}

.csc-dropdown__button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 12rem;
  background-color: var(--md-default-bg-color);
  cursor: pointer;
}

.csc-dropdown--header .csc-dropdown__button {
  height: var(--csc-header-height);
}

.csc-dropdown--sidebar .csc-dropdown__button {
  height: calc(var(--csc-header-height) - 23px);
}

.csc-dropdown__text {
  color: var(--md-default-fg-color);
  font-weight: var(--csc-font-weight--bold);
  font-size: medium;
}

.csc-dropdown__text::after {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  transform: rotate(90deg) translate(.3rem, -.1rem);
  mask-image: var(--md-nav-icon--next);
  -webkit-mask-image: var(--md-nav-icon--next);
  background-color: currentColor;
  content: "";
}

.csc-dropdown:where(:focus-within, :hover) .csc-dropdown__text::after {
  transform: rotate(270deg) translate(-.3rem, .1rem);
}

.csc-dropdown__content {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: 20px;
  font-size: small;
  font-weight: var(--csc-font-weight--regular);
  background-color: var(--md-default-bg-color);
  box-shadow: var(--csc-box-shadow--dropdown);
  z-index: 2;
  transform: rotateX(-90deg);
  transform-origin: top center;
  transition: 100ms all ease-out;
}

.csc-dropdown__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 283px;
  height: 42px;
  padding: 10px 10px 10px 13.5px;
}

.csc-dropdown__link[active="true"] {
  font-weight: var(--csc-font-weight--bold);
}

.csc-dropdown__content .csc-dropdown__item:hover {
  color: var(--md-typeset-a-color);
  background-color: var(--md-accent-bg-color--light);
  text-decoration: underline;
}

.csc-dropdown:where(:focus-within, :hover) .csc-dropdown__content {
  transform: rotateX(0);
}
