@import '../styles/partials/colors';

.ReactModal__Overlay {
  opacity: 0;
  transition: all 200ms ease-in-out;
}

.ReactModal__Overlay--after-open {
  opacity: 1;
}

.ReactModal__Overlay--before-close {
  opacity: 0;
}

.vert-flex-center {
  display: flex;
  align-items: center;
}

.text-bold {
  font-weight: 700;
}

*:disabled {
  cursor: not-allowed !important;
}

a.no-style {
  color: inherit !important;
  &:hover {
    text-decoration: none !important;
  }
}

p {
  line-height: 26px;
}

.cursor-pointer {
  cursor: pointer;
}

.color-primary {
  color: $primary-color;
  * {
    color: $primary-color;
  }
}

.color-white {
  color: $white-color;
  * {
    color: $white-color;
  }
}

.color-danger {
  color: $danger-color;
  * {
    color: $danger-color;
  }
}

.no-padding {
  padding: 0 !important;
}

.no-margin {
  margin: 0 !important;
}

.no-text-decor {
  text-decoration: none !important;
}

.vert-align-middle {
  vertical-align: middle;
}

a, select {
  cursor: pointer;
}

.box-hover {
  transition: all 0.2s linear !important;
  &:hover, &:active {
    border-color: rgba($color: $primary-color, $alpha: 0.5);
    // box-shadow: 0px 2px 6px rgba($color: #000000, $alpha: 0.2);
  }
}

.loader {
  color: $primary-color;
  animation: spin 0.7s linear infinite;
}

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