/* ========== Buttons css ========== */

/* buttons base styles */
.main-btn {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  @include user-select(none);
  padding: 15px 45px;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 5;
  transition: all 0.4s ease-in-out;
  border: 1px solid transparent;
  overflow: hidden;

  &:hover {
    color: inherit;
  }
}

.btn-sm {
  padding: 10px 20px;
  font-weight: 400;
}

/* buttons hover effect */
.btn-hover {
  position: relative;
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 0%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    top: 50%;
    left: 50%;
    padding: 50%;
    z-index: -1;
    @include transition(0.3s);
    @include transform(translate3d(-50%, -50%, 0) scale(0));
  }

  &:hover {
    &::after {
      @include transform(translate3d(-50%, -50%, 0) scale(1.3));
    }
  }
}
/* primary buttons */
.primary-btn {
  background: $primary;
  color: $white;

  &:hover {
    color: $white;
  }
}
.primary-btn-outline {
  background: transparent;
  color: $primary;
  border-color: $primary;

  &:hover {
    color: $white;
    background: $primary;
  }
}

/* secondary buttons */
.secondary-btn {
  background: $secondary;
  color: $white;

  &:hover {
    color: $white;
  }
}
.secondary-btn-outline {
  background: transparent;
  color: $secondary;
  border-color: $secondary;

  &:hover {
    color: $white;
    background: $secondary;
  }
}

/* success buttons */
.success-btn {
  background: $success;
  color: $white;

  &:hover {
    color: $white;
  }
}
.success-btn-outline {
  background: transparent;
  color: $success;
  border-color: $success;

  &:hover {
    color: $white;
    background: $success;
  }
}

/* danger buttons */
.danger-btn {
  background: $danger;
  color: $white;

  &:hover {
    color: $white;
  }
}
.danger-btn-outline {
  background: transparent;
  color: $danger;
  border-color: $danger;

  &:hover {
    color: $white;
    background: $danger;
  }
}

/* warning buttons */
.warning-btn {
  background: $warning;
  color: $white;

  &:hover {
    color: $white;
  }
}
.warning-btn-outline {
  background: transparent;
  color: $warning;
  border-color: $warning;

  &:hover {
    color: $white;
    background: $warning;
  }
}

/* info buttons */
.info-btn {
  background: $info;
  color: $white;

  &:hover {
    color: $white;
  }
}
.info-btn-outline {
  background: transparent;
  color: $info;
  border-color: $info;

  &:hover {
    color: $white;
    background: $info;
  }
}

/* dark buttons */
.dark-btn {
  background: $dark;
  color: $white;

  &:hover {
    color: $white;
  }
}
.dark-btn-outline {
  background: transparent;
  color: $dark;
  border-color: $dark;

  &:hover {
    color: $white;
    background: $dark;
  }
}

/* light buttons */
.light-btn {
  background: $light;
  color: $dark;

  &:hover {
    color: $dark;
  }
}
.light-btn-outline {
  background: transparent;
  color: $dark;
  border-color: $light;

  &:hover {
    color: $dark;
    background: $light;
  }
}

/* active buttons */
.active-btn {
  background: $active;
  color: $white;

  &:hover {
    color: $white;
  }
}
.active-btn-outline {
  background: transparent;
  color: $active;
  border-color: $active;

  &:hover {
    color: $white;
    background: $active;
  }
}

/* deactive buttons */
.deactive-btn {
  background: $deactive;
  color: $active;

  &:hover {
    color: $active;
  }
}
.deactive-btn-outline {
  background: transparent;
  color: $active;
  border-color: $deactive;

  &:hover {
    color: $active;
    background: $deactive;
  }
}

/* =========  square-btn ========= */
.square-btn {
  border-radius: 0px;
}

/* =========  rounded-md ========= */
.rounded-md {
  border-radius: 10px;
}
/* =========  rounded-full ========= */
.rounded-full {
  border-radius: 30px;
}

/* ========== buttons group css ========= */
.buttons-group {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;

  li {
    margin: 10px;
  }
}

/* ====== Status Button ====== */
.status-btn {
  padding: 7px 15px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 400;

  &.primary-btn {
    color: $white;
    background: rgba($primary, 1);
  }
  &.active-btn {
    color: $primary;
    background: rgba($primary, 0.1);
  }
  &.close-btn {
    color: $danger;
    background: rgba($danger, 0.1);
  }
  &.warning-btn {
    color: $warning;
    background: rgba($warning, 0.1);
  }
  &.info-btn {
    color: $info;
    background: rgba($info, 0.1);
  }
  &.success-btn {
    color: $success;
    background: rgba($success, 0.1);
  }
  &.secondary-btn {
    color: $secondary;
    background: rgba($secondary, 0.1);
  }
  &.dark-btn {
    color: $dark;
    background: rgba($dark, 0.1);
  }
  &.orange-btn {
    color: $orange;
    background: rgba($orange, 0.1);
  }
}