@import "./../styles/index.scss";

.popup-wrapper{
  position: absolute;
}

.popup-container{
  border: solid 1px transparent;
  border-radius: 15px;
  position: absolute;
  color: black;
  width: auto;
  z-index: 11;
  transform: translate(-50%, -50%);
  width: 226px;
  padding: 30px;

  .popup-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 14px;
    text-align: center;

    .popup-title > h1 {
      font-size: 14px;
    }

    .popup-confirm-button {
      padding: 0px 20px;
      height: 32px;
      border-radius: 23px;
      background-color: #0095ff;
      font-size: 14px;
      text-transform: none;
      margin-top: 26px;

      span {
        top: 0px;
      }
    }

    .popup-cancel-button {
      width: 147px;
      height: 19px;
      color: #0095ff;
      text-decoration: underline;
      background-color: transparent;
      font-size: 14px;
      text-transform: none;
    }
  }

}

.popup-overlay{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

/* THEME
   ----------------------------- */
@mixin themable($_THEME, $_BACKGROUND_COLOR_POPUP, $_BORDER_COLOR_POPUP, $_COLOR_TEXT_POPUP_TITLE, $_COLOR_TEXT_POPUP_PARAGRAPH){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    .popup-container{
      background-color: $_BACKGROUND_COLOR_POPUP;
      border-color: $_BORDER_COLOR_POPUP;
      color: $_COLOR_TEXT_POPUP_PARAGRAPH;

      h1 {
        color: $_COLOR_TEXT_POPUP_TITLE
      }
    }
  }
}
  
@include themable($_THEME_LIGHT, $_BACKGROUND_COLOR_POPUP_LIGHT, $_BORDER_COLOR_POPUP_LIGHT, $_COLOR_TEXT_POPUP_TITLE_LIGHT, $_COLOR_TEXT_POPUP_PARAGRAPH_LIGHT);
@include themable($_THEME_DARK, $_BACKGROUND_COLOR_POPUP_DARK, $_BORDER_COLOR_POPUP_DARK, $_COLOR_TEXT_POPUP_TITLE_DARK, $_COLOR_TEXT_POPUP_PARAGRAPH_DARK);