/**
MODAL
*/
@import "mixin";

.tap-overlay {
  background: #313b47;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999999;
  opacity: 0.8;
}

.tap-popup-overlay {
  @extend .tap-overlay;
  left: 220px;

  body.folded & {
    left: 96px;
  }
}

.tap-modal {
  background: #fff;
  padding: 30px 40px;
  border-radius: 5px;
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: var(--modal-width, var(--modal-size, 80%));
  min-height: var(--modal-height, var(--modal-size, 80%));
  transform: translate(-50%, -50%);
  z-index: 9999999;
  color: var(--tap-text-color);
  overflow: hidden;

  &.tap-error-modal {
    height: 1px;
  }

  .tap-modal-container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .tap-modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100px;
    @include scrollbars();

    .tap-content-title {
      font-size: 22px;
      margin: 0 0 20px;
    }
  }

  .tap-modal-header {
    font-size: 22px;

    &:empty {
      display: none;
    }
  }

  .tap-modal-description {
    font-size: 14px;
    height: 100%;
  }

  .tap-modal-footer {
    position: sticky;
    background: #fff;
    top: 100vh;
    justify-content: end;
    display: grid;
    grid-auto-flow: column;
    gap: 20px;
    align-items: center;
    color: rgba(58, 62, 69, 0.8);
    font-size: 14px;

    .tap-button {
      font-weight: 500;
    }

    .tap-modal-actions {
      position: absolute;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background: #fff;
      padding: 30px;
      width: 100%;
      box-sizing: border-box;
    }
  }

  .tap-modal-close {
    color: var(--tap-text-color);
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 15px;
    --tap-icon-size: 10px;

    &:hover {
      opacity: 0.8;
    }
  }

  &.tap-delete-confirmation-modal {
    .tap-modal-footer {
      display: flex;
      justify-content: space-between;
    }
  }
}

.tap-no-consent-modal {
  .tap-info {
    .tap-icon-wrapper {
      margin: 0 auto;
      --tap-icon-size: 13px;
    }
  }
}


.tap-firefox-browser {
  .tap-modal {
    &.tap-no-consent-modal {
      .tap-modal-content {
        height: 100%;
      }
    }
  }
}

@media screen and (max-height: 900px) {
  .tap-firefox-browser {
    .tap-modal {
      &.tap-no-consent-modal {
        .tap-modal-content {
          height: calc(100% - 90px);
        }
      }

      .tap-modal-footer {
        position: initial;
      }
    }
  }
}

@media screen and (max-height: 750px) {
  .tap-firefox-browser {
    .tap-modal {
      &.tap-no-consent-modal {
        .tap-modal-content {
          height: calc(100% - 20vh - 40px);
        }
      }
    }
  }
}

.tap-disable-consent-modal {
  --modal-height: 600px;
}

.tap-inline-delete-confirmation {
  @extend .tap-flex;
  background-color: var(--tap-delete);
  position: absolute;
  width: 100%;
  height: 100%;
  flex-direction: column;
  padding: 20px;
  color: #fff;
  box-sizing: border-box;
  top: 0;
  left: 0;
  z-index: 999;

  &.tap-row {
    flex-direction: row;
    justify-content: space-between;

    .tap-delete-message {
      margin: 0;
    }
  }

  .tap-delete-message {
    font-size: 14px;
    margin: 10px 0;
  }

  .tap-delete-buttons {
    @extend .tap-flex;
    min-width: 200px;

    .tap-button {
      &:hover {
        color: #efefef !important;
      }

      font-size: 12px;
    }
  }
}

.tap-dismissible-notice-wrapper {
  @include sticky_notice();
  background-color: var(--tap-primary-light);
  color: #fff;
  bottom: 50%;
  display: none !important;
  max-width: 25%;
  border-radius: 5px;

  .tap-button {
    min-width: 100px;
    max-width: 100px;
    background-color: #fff;
    border: 1px solid transparent;

    &:hover {
      opacity: 1;
      color: #fff;
      border: 1px solid #fff;
    }
  }

  * {
    font-weight: 400;
  }

  h1 {
    color: #fff;
  }

  &.tap-fade-in {
    display: flex !important;
    animation: toastFadeIn 0.75s;
  }
}

/**
    TOAST
 */

#tap-toast-container {
  @include sticky_notice();
  display: none;
  min-width: 200px;
  max-width: 350px;
  bottom: 15%;
  font-size: 13px;
  background-color: var(--tap-action-color);
  color: #fff;
  border-radius: 4px;
  padding: 10px 10px 10px 15px;

  &:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    border-radius: 4px 0 0 4px;
    background-color: #513252;
  }

  &.show-toast {
    display: block;
    animation: toastFadeIn 0.75s;
  }
}

@keyframes toastFadeIn {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 50%;
    opacity: 1;
  }
}

@keyframes toastFadeOut {
  from {
    bottom: 15%;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}