@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  padding: 0;
  margin: 0;
  font-family: "GT Walsheim Pro", -apple-system, BlinkMacSystemFont, Segoe UI,
    Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
    sans-serif;
  color: white;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

*:focus {
  outline: none !important;
}

/* editor settings forms ====================================*/

.editor-sub-settings {
  @apply flex flex-col my-3 w-full lg:w-2/3;
}

.editor-sub-settings > .title {
  @apply text-base;
}

.editor-sub-settings > .description {
  @apply text-gray-400 mb-2;
}

.editor-sub-settings > label {
  @apply mb-2;
}

.editor-label {
  @apply text-xl text-gray-400 mr-4;
}

.editor-select {
  @apply text-gray-200 rounded-sm;
}

.editor-button {
  @apply flex items-center justify-center px-4 rounded transform active:scale-75 transition-all duration-300;
}

/* iframe =========================================== */
.iframe-container {
  position: relative;
  width: 100%;
  height: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.iframe-container iframe {
  background: #ffffff;
  position: relative;
  width: 100%;
  height: 100%;
}

.react-draggable-transparent-selection .iframe-container:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}

.error-message {
  position: absolute;
  top: 0;
  color: red;
}

/* spinner =============================== */
.loader-spinner {
  border-top-color: #34d399;
  -webkit-animation: spinner 0.7s linear infinite;
  animation: spinner 0.7s linear infinite;
}

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.glassmorphism {
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  background-color: rgba(23, 30, 37, 0.75);
}

.backdrop {
  background: rgba(0, 0, 0, 0.25);
  z-index: 50;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
}