/**
 * @author Kitty Giraudel
 * https://twitter.com/KittyGiraudel
 * https://www.linkedin.com/in/kitty-giraudel/
 */

body {
  font-family: sans-serif;
  font-size: 125%;
  margin: 2em;
}

/**
 * 1. Reset the default styles from a list.
 */
.List {
  list-style: none; /* 1 */
  padding-left: 0; /* 1 */
  margin: 0; /* 1 */
}

/**
 * 1. Make each item look like a card.
 * 2. Provide position context for the button pseudo-element.
 * 3. Clean the image’s float.
 * 4. Enable flex layout for left/right items.
 */
.Card {
  border: 1px solid rgb(100 0 0 / 0.2); /* 1 */
  box-shadow: 0 0 0.5em -0.15em rgb(50 0 0 / 0.15); /* 1 */
  border-radius: 0.4em; /* 1 */
  padding: 1em; /* 1 */
  margin: 1em 0;
  position: relative; /* 2 */
  overflow: hidden; /* 3 */
  display: flex; /* 4 */
  align-items: flex-start; /* 4 */
  gap: 1em; /* 4 */
}

/**
 * 1. Reset the default styles from a heading (in case it is a
 *    `<hx>` element).
 */
.Card-Title {
  font-size: 100%; /* 1 */
  margin-top: 0; /* 1 */
  margin-bottom: 0.5em; /* 1 */
  font-weight: bold;
}

/**
 * 1. Reset the default styles from a link.
 */
.Card-Primary-Action {
  color: deeppink;
  text-decoration: none; /* 1 */
}

/**
 * 1. Use a pseudo-element to expand the hitbox of the link over
 *    the whole card.
 * 2. Expand the hitbox over the whole card.
 * 3. Show that the card is interactive.
 */
.Card-Primary-Action::before {
  content: ""; /* 1 */
  position: absolute; /* 2 */
  top: 0; /* 2 */
  left: 0; /* 2 */
  right: 0; /* 2 */
  bottom: 0; /* 2 */
  border: 2px solid transparent; /* 3 */
  cursor: pointer; /* 3 */
  border-radius: 0.3em;
  transition: border-color 200ms;
}

/**
 * 1. Hide the default focus outline as it’s recreated with a border.
 */
.Card-Primary-Action:focus {
  outline: none; /* 1 */
}

/**
 * 1. Display interactivity on hover/focus by highlighting the border.
 */
.Card-Primary-Action:hover::before,
.Card-Primary-Action:focus::before {
  border-color: hotpink; /* 1 */
}

.Card-Meta {
  margin: 0;
}

.Card-Image {
  border-radius: 50%;
  max-width: 2.75em;
}

/**
 * 1. Push the secondary action to the right of the card.
 * 2. Place secondary action on top of the card.
 */
.Card-Secondary-Action {
  margin-left: auto; /* 1 */
  z-index: 2; /* 2 */
  position: relative; /* 2 */
  cursor: pointer;
}

/**
 * 1. Make the dialog container, and its child overlay spread across
 *    the entire window.
 */
.dialog-container,
.dialog-overlay {
  position: fixed; /* 1 */
  top: 0; /* 1 */
  right: 0; /* 1 */
  bottom: 0; /* 1 */
  left: 0; /* 1 */
}

/**
  * 1. Make sure the dialog container and all its descendants sits on
  *    top of the rest of the page.
  * 2. Make the dialog container a flex container to easily center the
  *    dialog.
  */
.dialog-container {
  z-index: 2; /* 1 */
  display: flex; /* 2 */
}

.dialog-content {
  padding: 1em;
}

/**
  * 1. Make sure the dialog container and all its descendants are not
  *    visible and not focusable when it is hidden.
  */
.dialog-container[aria-hidden="true"] {
  display: none; /* 1 */
}

/**
  * 1. Make the overlay look like an overlay.
  */
.dialog-overlay {
  background-color: rgba(43, 46, 56, 0.9); /* 1 */
}

/**
  * 1. Vertically and horizontally center the dialog in the page.
  * 2. Make sure the dialog sits on top of the overlay.
  * 3. Make sure the dialog has an opaque background.
  */
.dialog-content {
  margin: auto; /* 1 */
  z-index: 2; /* 2 */
  position: relative; /* 2 */
  background-color: white; /* 3 */
}

.dialog-title {
  margin-top: 0;
}

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}