/**
 * @file
 * Default styles for Open Berkeley brand modal widgets.
 */

/**
 * NOTE: We should try to limit the styles here to structural things like
 * positioning, box sizing and visibility. Colors and fonts are the purview
 * of the theme and should only be used here when necessary to make the
 * unstyled default understandable.
 */


/*
 * Make the YouTube player in the modal responsive.
 */
div.openberkeley-widgets-zoom-modal .openberkeley-media-kaltura-iframe,
div.openberkeley-widgets-zoom-modal .media-youtube-video,
div.openberkeley-widgets-zoom-modal .media-vimeo-video {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

div.openberkeley-widgets-zoom-modal .openberkeley-media-kaltura-iframe > iframe,
div.openberkeley-widgets-zoom-modal .media-youtube-video > iframe,
div.openberkeley-widgets-zoom-modal .media-vimeo-video > iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

.openberkeley-widgets-carousel-modal .carousel-indicators li {
  background-color: #d6d6d6;
  color: #000;
  height: 1.6rem;
  width: 1.6rem;
  text-indent: 0;
  border-radius: 1.6rem;
  border: 0;
  padding: 0;
  font-size: .8rem;
}

.openberkeley-widgets-carousel-modal .carousel-indicators li.active {
  background-color: #888;
  color: #fff;
}

.openberkeley-widgets-carousel-modal .carousel-indicators li button {
  box-sizing: border-box;
  border: none;
  background-color: transparent;
  font-family: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 1.6rem;

  @media screen and (-ms-high-contrast: active) {
    border: 2px solid currentcolor;
  }
}

.openberkeley-widgets-carousel-modal .carousel-indicators li button:focus {
  outline: 1px dotted #000;
}

.openberkeley-widgets-carousel-modal .carousel-indicators li button:focus:not(:focus-visible) {
  outline: 0;
}

.openberkeley-widgets-carousel-modal .carousel-indicators li button:focus-visible {
  outline: 1px dotted #000;
}