/* SPage */
.s-page-ctrl {
  display: flex;
  justify-content: space-between;
}

.s-page-btn-group {
  display: flex;
  flex-grow: 2;

  margin-right: 20px;
}

.s-page-ctrl-btns {
  flex-grow: 1;
}

.s-page-btn-ellipsis {
  display: block;
  transform: translateY(-4px);
}

.s-page-btn-icon {
  display: inline-block;
  --size: 8px;
  width: var(--size);
  height: var(--size);
  border: 2px solid var(--success);
  border-top: none;
  border-right: none;
  margin-bottom: 1.5px;
  transition: all .15s;
}

.btn:not(:disabled):hover .s-page-btn-icon {
  border-color: white;
}

.s-page-btn-icon.prev {
  transform: rotate(45deg);
}

.s-page-btn-icon.next {
  transform: rotate(-135deg);
}



@media (max-width: 992px) {
  .s-page-ctrl {
    flex-wrap: wrap;
  }
  .s-page-btn-group {
    width: 100%;
    margin-right: 0;
  }
  .s-page-btn:first-child {
    border-bottom-left-radius: 0;
  }
  .s-page-btn:last-child {
    border-bottom-right-radius: 0;
  }

  .s-page-ctrl-btns {
    width: 100%;
    margin-top: -1px;
  }

  .s-page-ctrl-btn:first-child {
    border-top-left-radius: 0;
  }
  .s-page-ctrl-btn:last-child {
    border-top-right-radius: 0;
  }

  
  .s-page-btn-group > .s-page-btn {
    flex: 2 1 auto;
    padding: .375rem 1px;
  }

  .s-page-btn:disabled {
    flex: 1 1 auto;
    padding: .375rem 0;
  }
  
}


.s-page-btn-move,
.s-page-btn-enter-active,
.s-page-btn-leave-active {
  transition: all .3s;
  white-space: nowrap;
  overflow: hidden;

}

.s-page-btn-enter-from,
.s-page-btn-leave-to {
  padding: 0;
  opacity: 0;
  font-size: 0;
  
  flex-grow: 0!important;
}


/* SModal */
.s-modal-mask {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 990;
}

.s-modal-main {
  margin: 0 auto;
  width: 500px;
  max-width: 100%;
  border-radius: 0;
  border: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.s-modal-enter-active,
.s-modal-leave-active {
  transition: all 0.3s;
}
.s-modal-enter-from,
.s-modal-leave-to {
  transform: translateY(100%);
}

/* SToast */
.s-toast .s-modal-mask {
  z-index: 991;
}

.s-toast-prog {
  background-color: gray;
  height: 2px;
  transition: all 0.3s;

  position: absolute;
  bottom: 0;
  left: 0;
}

.s-toast-close {
  cursor: pointer;
  font-weight: bold;
  color: gray;
  transition: all 0.3s;
  font-size: 24px;
  line-height: 0.9;
}
.s-toast-close:hover {
  color: var(--danger);
}

/* SPrompt */
.s-prompt-title {
  font-size: 1.5rem;
  font-weight: bold;
}
.s-prompt-content {
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}
.s-prompt-buttons {
  text-align: right;
  margin-top: 0.5rem;
}

/* Vue Transition */
.v-enter-active,
.v-leave-active {
  transition: all 0.3s;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
  transform: translateY(50px);
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* utils */

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}