// -----------------------------------------------------------------------------
// This file contains all styles related to the button component.
// -----------------------------------------------------------------------------
.oh-btn {
  display: block;
  border: none;
  border-radius: 0rem;
  padding: 0.8rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  color: $button-text-grey;

  @media (max-width: 575.98px) {
    font-size: 0.8rem !important;
  }

  &:hover {
    background-color: $dark-button-color;
  }

  &:focus,
  &:focus-visible {
    outline: $brand-color solid 2px;
    border-radius: 0;
    border: none;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.oh-btn--shadow {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.1));
}

.oh-btn--sq-sm {
  width: 28px;
  height: 28px;
}

.oh-btn--inline {
  display: inline-block;
}

.oh-btn--transparent {
  background-color: transparent;
  color: rgba($text-color, 0.8);

  &:hover,
  &:focus,
  &:focus-visible {
    background-color: transparent;
    border: none;
    color: rgba($text-color, 1);
  }
}

.oh-btn--secondary {
  background-color: $secondary-color;
  color: $white;
  text-decoration: none;

  &:hover,
  &:focus,
  &:focus-visible {
    background-color: $secondary-color-dark;
    color: white;
    text-decoration: none;
  }

  &:disabled {
    background-color: $secondary-color;
  }
}

.oh-btn--secondary-ouline {
  border: 1px solid $secondary-color;
  color: $secondary-color;
  background-color: transparent;

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

  &:focus,
  &:focus-visible {
    color: $secondary-color-dark;
    background-color: transparent;
    border: 1px solid $secondary-color-dark;
  }
}

.oh-btn--success {
  background-color: $success-color;
  color: $white;

  &:hover,
  &:focus,
  &:focus-visible {
    background-color: $success-color-dark;
    text-decoration: none;
  }
}

.oh-btn--danger {
  background-color: $danger-color;
  color: $white;

  &:hover,
  &:focus,
  &:focus-visible {
    background-color: $danger-color-dark;
    text-decoration: none;
  }
}

.oh-btn--danger-outline {
  color: $danger-color;

  &:hover,
  &:focus,
  &:focus-visible {
    color: $danger-color-dark;
    text-decoration: none;
  }
}

.oh-btn--primary {
  background-color: $brand-color;
  color: $white;

  &:hover,
  &:focus,
  &:focus-visible {
    background-color: $brand-color-dark;
    color: $white;
    text-decoration: none;
  }
}

.oh-btn--primary-outline {
  background-color: transparent;
  border: 1px solid $brand-color;
  color: $brand-color;

  &:hover,
  &:focus,
  &:focus-visible {
    background-color: $brand-color;
    color: $white;
  }
}

.oh-btn--secondary-outline {
  background-color: transparent;
  border: 1px solid $secondary-color;
  color: $secondary-color;

  &:hover,
  &:focus,
  &:focus-visible {
    background-color: $secondary-color;
    color: $white;
  }
}

.oh-btn--white-outline {
  background-color: transparent;
  border: 1px solid $white;
  color: $white;

  &:hover,
  &:focus,
  &:focus-visible {
    background-color: $white;
    color: hsl(8,77%,56%);
  }
}



.oh-btn--warning-outline {
  background-color: transparent;
  border: 1px solid $yellow;
  color: $yellow;

  &:hover,
  &:focus,
  &:focus-visible {
    background-color: $yellow;
    color: $text-color;
  }
}

.oh-btn--success-outline {
  background-color: transparent;
  border: 1px solid $success-color;
  color: $success-color;

  &:hover,
  &:focus,
  &:focus-visible {
    background-color: $success-color;
    color: $white;
  }
}

.oh-btn--info-outline {
  background-color: transparent;
  border: 1px solid $blue;
  color: $blue;

  &:hover,
  &:focus,
  &:focus-visible {
    background-color: $blue;
    color: $white;
  }
}

.oh-btn--info {
  background-color: $blue;
  color: $white;

  &:hover,
  &:focus,
  &:focus-visible {
    background-color: $blue-dark;
    color: $white;
    text-decoration: none;
  }
}

.oh-btn--warning {
  background-color: $yellow;
  color: $text-color;

  &:hover,
  &:focus,
  &:focus-visible {
    background-color: $yellow-dark;
    color: $text-color;
    text-decoration: none;
  }
}

.oh-btn--dropdown {
  position: relative;

  &::after {
    content: url("data:image/svg+xml,%3Csvg width='12' height='12' fill='%23ffffff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4.594 8.912 6.553 7.646a1.126 1.126 0 0 0 1.708 0l6.552-7.646c.625-.73.107-1.857-.854-1.857H5.447c-.961 0-1.48 1.127-.853 1.857Z'%3E%3C/path%3E%3C/svg%3E");
    position: relative;
    width: 20px;
    left: 5px;
  }
}

.oh-input--medium {
  font-size: 0.9rem;
  padding: 0.65rem 1rem;
  height: 40.94px;
}

.oh-btn--small {
  font-size: 0.9rem;
  padding: 0.65rem 1rem;
}

.oh-btn--x-small {
  font-size: 0.8rem;
  padding: 0.5rem 0.8rem;
}

.oh-btn--f-md {
  font-size: 1.15rem;
}

.oh-btn--w-100-resp {
  @media (max-width: 767.98px) {
    width: 100%;
  }
}

.oh-btn--secondary-link {
  color: $secondary-color;

  &:hover,
  &:focus,
  &:focus-visible {
    color: $secondary-color-dark;
    text-decoration: none !important;
  }
}

.oh-btn--danger-link {
  color: $danger-color;

  &:hover,
  &:focus,
  &:focus-visible {
    color: $danger-color-dark;
    text-decoration: none !important;
  }
}

.oh-btn--light {
  background-color: $background-color;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: $secondary-color;

  &:hover,
  &:focus,
  &:focus-visible {
    text-decoration: none;
    color: $secondary-color-dark;
    background-color: $border-light-color;
  }
}

.oh-btn--light-dark-text {
  background-color: $background-color;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: $text-color;

  &:hover,
  &:focus,
  &:focus-visible {
    text-decoration: none;
    color: $text-color;
    background-color: $border-light-color;
  }
}

.oh-btn--light-danger {
  color: $danger-color;
  background-color: transparent;

  &:hover,
  &:focus,
  &:focus-visible {
    text-decoration: none;
    color: $danger-color-dark;
  }
}

.oh-btn--view {
  background-color: $white-color;
  border: none;

  &:hover,
  &:focus,
  &:focus-visible {
    background-color: $background-color;
    outline: none;
  }
}

.oh-btn--view-active {
  background-color: $button-light-color;
  color: $text-color;
}

.oh-btn-group {
  display: flex;
  align-items: center;
  border: 1px solid $border-light-color;
}

.oh-btn-group > * {
  border-right: 1px solid $border-light-color;

  &:last-child {
    border-right: none;
  }
}

.oh-btn--light-bkg {
  background-color: $background-color !important;

  &:hover {
    background-color: $light-grey !important;
  }
}

.oh-floatin-btn {
  position: fixed;
  right: 1.5rem;
  bottom: 2.5rem;
  display: flex;
  align-items: center;
  border: none;
  border-radius: 25px;
  padding: 1rem 1.5rem;
  background-color: $white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 8px;
  transition: all 0.3s ease-in-out;

  &:hover {
    transition: all 0.3s ease-in-out;
  }
}

.oh-floatin-btn--success {
  &:hover {
    color: $success-color;
    transition: all 0.3s ease-in-out;
  }
}

.oh-floatin-btn--danger {
  &:hover {
    color: $danger-color;
    transition: all 0.3s ease-in-out;
  }
}

.oh-btn--disabled {
  opacity: 0.6;
  cursor: not-allowed !important;

  &:focus,
  &:focus-visible {
    outline: none;
  }
}

.oh-btn--chat {
  display: inline-flex;
  background-color: transparent;

  &::after {
    width: 20px;
    height: 20px;
    position: absolute;
    display: block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transition: all 0.4s ease-in-out;
  }

  &:hover {
    background-color: transparent;

    &::after {
      transition: all 0.4s ease-in-out;
    }
  }
}

.oh-btn--chat-send {
  &::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon s-ion-icon' fill='darkgrey' viewBox='0 0 512 512'%3E%3Cpath d='M16 464l480-208L16 48v160l320 48-320 48z'%3E%3C/path%3E%3C/svg%3E");
  }

  &:hover {
    &::after {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon s-ion-icon' fill='grey' viewBox='0 0 512 512'%3E%3Cpath d='M16 464l480-208L16 48v160l320 48-320 48z'%3E%3C/path%3E%3C/svg%3E");
    }
  }
}

.oh-btn--chat-attachments {
  position: absolute;

  &::after {
    content: "";
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'%3E%3C/path%3E%3Cpath d='M14.8287 7.75737L9.1718 13.4142C8.78127 13.8047 8.78127 14.4379 9.1718 14.8284C9.56232 15.219 10.1955 15.219 10.586 14.8284L16.2429 9.17158C17.4144 8.00001 17.4144 6.10052 16.2429 4.92894C15.0713 3.75737 13.1718 3.75737 12.0002 4.92894L6.34337 10.5858C4.39075 12.5384 4.39075 15.7042 6.34337 17.6569C8.29599 19.6095 11.4618 19.6095 13.4144 17.6569L19.0713 12L20.4855 13.4142L14.8287 19.0711C12.095 21.8047 7.66283 21.8047 4.92916 19.0711C2.19549 16.3374 2.19549 11.9053 4.92916 9.17158L10.586 3.51473C12.5386 1.56211 15.7045 1.56211 17.6571 3.51473C19.6097 5.46735 19.6097 8.63317 17.6571 10.5858L12.0002 16.2427C10.8287 17.4142 8.92916 17.4142 7.75759 16.2427C6.58601 15.0711 6.58601 13.1716 7.75759 12L13.4144 6.34316L14.8287 7.75737Z' fill='rgba(169,169,169,1)'%3E%3C/path%3E%3C/svg%3E");
  }

  &:hover {
    &::after {
      content: "";
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'%3E%3C/path%3E%3Cpath d='M14.8287 7.75737L9.1718 13.4142C8.78127 13.8047 8.78127 14.4379 9.1718 14.8284C9.56232 15.219 10.1955 15.219 10.586 14.8284L16.2429 9.17158C17.4144 8.00001 17.4144 6.10052 16.2429 4.92894C15.0713 3.75737 13.1718 3.75737 12.0002 4.92894L6.34337 10.5858C4.39075 12.5384 4.39075 15.7042 6.34337 17.6569C8.29599 19.6095 11.4618 19.6095 13.4144 17.6569L19.0713 12L20.4855 13.4142L14.8287 19.0711C12.095 21.8047 7.66283 21.8047 4.92916 19.0711C2.19549 16.3374 2.19549 11.9053 4.92916 9.17158L10.586 3.51473C12.5386 1.56211 15.7045 1.56211 17.6571 3.51473C19.6097 5.46735 19.6097 8.63317 17.6571 10.5858L12.0002 16.2427C10.8287 17.4142 8.92916 17.4142 7.75759 16.2427C6.58601 15.0711 6.58601 13.1716 7.75759 12L13.4144 6.34316L14.8287 7.75737Z' fill='rgba(91,91,91,1)'%3E%3C/path%3E%3C/svg%3E");
    }
  }
}

.oh-btn--sq {
  width: 32px;
  height: 32px;
  padding: 0;
}

.oh-btn--danger-text {
  color: $danger-color;

  &:hover {
    color: $danger-color-dark;
  }
}

.oh-hover-btn {
  border: 2px solid rgba($text-color, 1);
  background-color: transparent;
  border-radius: 3px;
  padding: 0.15rem 0.4rem;

  &:hover {
    background-color: $border-light-color;
  }
}
.oh-hover-btn-container{
  position: relative;
  display: inline-block;
  &::before{
    content: "";
    display: block;
    background-color: transparent;
    position: absolute;
    width: 100%;
    height: 20px;
    bottom: 100%;
  }
}
.oh-hover-btn__small {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: $white;
  border: 1px solid $border-light-color;
  box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px,
    rgba(17, 17, 26, 0.05) 0px 8px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s linear;
  &:hover {
    background-color: $secondary-color;
    border: 1px solid $secondary-color-dark;
    color: $white-color;
    transition: all 0.2s linear;
    transform: scale(105%);
  }
}
.oh-hover-btn-drawer {
  align-items: center;
  position: absolute;
  display: flex;
  gap: 5px;
  z-index: 99;
  right: -20px;
  bottom: 130%;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

.oh-hover-btn-container{
  &:hover{
    .oh-hover-btn-drawer {
      display: flex;
      visibility: visible;
      pointer-events: all;
      opacity: 1;
    }
  }
}