:root {
  --normal-bg: #fff;
  --normal-border: #ededed;
  --normal-text: #171717;
  --success-bg: #ecfdf3;
  --success-border: #d3fde5;
  --success-text: #008a2e;
  --info-bg: #f0f8ff;
  --info-border: #d3e0fd;
  --info-text: #0973dc;
  --warning-bg: #fffcf0;
  --warning-border: #fdf5d3;
  --warning-text: #dc7609;
  --error-bg: #fff0f0;
  --error-border: #ffe0e1;
  --error-text: #e60000;
  --sparta-color: #E8344E
}

.toast-container {
  position: fixed;
  z-index: 1000;
}

.alert-container {
  position: fixed;
  width: auto;
  top: 20px;
  right: 20px;

  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;

  &.isFold {
    align-items: center;
  }

  &.isFold .toast {
    z-index: 3;
    position: relative;
    top: 0;
  }

  &.isFold .toast+.toast {
    z-index: 2;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    box-sizing: border-box;

    &+.toast {
      z-index: 1;
      top: 40px;
      width: 80%;
    }
  }

  &.isFold:hover .toast+.toast {
    top: calc(100% + 10px);
    width: auto;
    min-width: 100%;
    font-size: 14px;

    &:before {
      content: '';
      display: block;
      width: 100%;
      height: 10px;
      position: absolute;
      bottom: 100%;
    }

    &+.toast {
      top: calc(200% + 20px);
    }
  }
}

.toast.confirm-toast {
  z-index: 99999;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
}

.confirm-toast .inner-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;

  min-width: 400px;
  padding: 40px 24px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 8px;

  cursor: default;

  >img {
    max-width: 50%;
  }

  .message {
    font-size: 28px;

    &:before {
      content: none;
    }
  }
}

.confirm-toast .inner-box .button-area {
  display: flex;
  gap: 16px;

  button {
    width: 80px;
    height: 40px;

    border: 2px solid var(--success-text);
    border-radius: 4px;
    background: #fff;
    outline: none;
    font-size: 16px;
    color: var(--success-text);
    font-weight: 700;

    cursor: pointer;
    transition: 0.5s;

    &:hover {
      background-color: var(--success-bg);
    }

    &+button {
      border-color: var(--warning-text);
      color: var(--warning-text);

      &:hover {
        background-color: var(--warning-bg);
      }
    }
  }
}

.t-l {
  right: auto;
  left: 20px;
}

.t-c {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.c-l {
  top: 50%;
  right: auto;
  transform: translateY(-50%);
}

.c-c {
  right: auto;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.c-r {
  top: 50%;
  transform: translateY(-50%);
}

.b-l {
  top: auto;
  right: auto;
  bottom: 20px;
  left: 20px;
}

.b-c {
  top: auto;
  right: auto;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.b-r {
  top: auto;
  bottom: 20px;
  right: 20px;
}

.toast {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;

  min-width: 200px;
  padding: 10px 15px;

  background-color: var(--normal-bg);
  border-color: var(--normal-border);
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

  font-size: 14px;
  color: var(--normal-text);

  animation: slideIn 0.3s ease-out;
  transition: top 0.3s, width 0.3s;
}

.alert-container .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;

  >img {
    max-width: 50%;
    margin-bottom: 16px;

    +.message {
      justify-content: center;
    }
  }
}

.alert-container .message {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
  height: 24px;

  &:before {
    content: url(../assets/normal.svg);
    display: block;
    width: 24px;
    height: 24px;
  }
}

.progress {
  width: 100%;
  height: 2px;
  background: #000;
  transform-origin: left;
  animation: progressbar linear 1 forwards;
  animation-play-state: running;
}

.on .progress {
  animation-play-state: paused;
}

@keyframes progressbar {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

.toast.success {
  background-color: var(--success-bg);
  color: var(--success-text);
  border-color: var(--success-border);

  .message:before {
    content: url(../assets/success.svg);
  }
}

.toast.info {
  background-color: var(--info-bg);
  color: var(--info-text);
  border-color: var(--info-border);

  .message:before {
    content: url(../assets/info.svg);
  }
}

.toast.warning {
  background-color: var(--warning-bg);
  color: var(--warning-text);
  border-color: var(--warning-border);

  .message:before {
    content: url(../assets/warning.svg);
  }
}

.toast.error {
  background-color: var(--error-bg);
  color: var(--error-text);
  border-color: var(--error-border);

  .message:before {
    content: url(../assets/error.svg);
  }
}

.toast.close {
  background: none;
  border: none;
  color: var(--normal-text);
  cursor: pointer;
  font-size: 14px;

  &:hover {
    color: gray;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    margin-top: -30px;
  }

  to {
    opacity: 1;
    margin-top: 0;
  }
}

.toast-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 8px;
  cursor: pointer;

  &:hover {
    opacity: 60%;
  }
}