$title-background-color: #344055 !default;
$title-text-color: white !default;
$min-width: 35rem !default;
$max-width: 52rem !default;
$min-height: 0 !default;
$max-height: 80vh !default;
$default-padding: 1rem 1.5rem !default;

.kpop-container {
  display: none;

  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;

  justify-content: center;
  align-items: center;
  z-index: 1000;
  pointer-events: none;

  > * {
    pointer-events: auto;
  }
}

.kpop-modal {
  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-areas:
    "title-bar"
    "header"
    "content"
    "footer";
  grid-template-rows: auto auto 1fr auto;

  border: 1px solid black;
  border-radius: 0.5rem;
  background-color: white;

  min-width: $min-width;
  max-width: $max-width;
  min-height: $min-height;
  max-height: $max-height;

  .kpop-title-bar {
    grid-area: title-bar;
    display: flex;
    background: $title-background-color;
    color: $title-text-color;

    .kpop-title {
      padding: $default-padding;
      flex-grow: 1;
    }

    .kpop-close {
      background: none;
      border: none;
      color: $title-text-color;
      cursor: pointer;
      display: block;
      font-size: 2rem;
      font-weight: bold;
      padding: 0 0.75rem;
      text-decoration: none;
    }
  }

  .kpop-header {
    grid-area: header;
  }

  .kpop-content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  .kpop-footer {
    grid-area: footer;
    background: white;
    border-top: 1px solid black;
    padding: $default-padding;
  }

  .kpop-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
  }
}

.kpop-modal.iframe {
  .kpop-content {
    overflow: unset;
  }

  iframe {
    height: $max-height;
    width: $max-width;
    flex-grow: 1;
    overflow: scroll;
  }
}

@media (max-width: 600px), (max-height: 600px) {
  .kpop-modal {
    max-width: unset;
    min-width: unset;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
    border: none;
  }

  .kpop-modal.iframe {
    iframe {
      width: 100%;
      height: 100%;
    }
  }

  .kpop-buttons {
    flex-direction: column-reverse;
    text-align: center;
  }
}