// -----------------------------------------------------------------------------
// This file contains all styles related to the button component.
// -----------------------------------------------------------------------------
//default button style
.trk-btn {
  @extend %p-rel,
  %d-inline-block,
  %of-hidden,
  %text-center;
  @include font-size(16px);
  border: transparent;
  color: $brand-color-1;
  font-weight: 500;
  font-family: $text-font;
  padding: 1.125rem 1.85rem;
  text-decoration: none;
  transition: $transition;
  text-transform: capitalize;
  line-height: 1;

  @include breakpoint(xl) {
    padding: 1.25rem 1.85rem;
  }

  i,
  svg {
    @extend %me-5;
    transition: $transition;
  }

  &--rounded {
    border-radius: 50px;
    padding: 1.125rem 1.85rem;

    @include breakpoint(xl) {
      @include font-size(18px);
      padding: 1.25rem 2.25rem;
    }
  }

  &--border {
    border-radius: 8px;
    padding: 1.125rem 1.85rem;

    @include breakpoint(xl) {
      @include font-size(18px);
      padding: 1.35rem 1.85rem;
    }
  }

  &--primary1 {
    background-color: $secondary-color-1;
  }

  &--primary2 {
    background-color: $secondary-color-2;
    color: $white-color;
  }

  &--primary3 {
    background-color: $secondary-color-3;
  }

  &--primary4 {
    background-color: $secondary-color-4;

  }

  &--secondary1 {
    background-color: $brand-color-1;
    color: $white-color;
  }

  &--apply {
    @extend %px-20,
    %py-15;
    background-color: $brand-color-1;
    color: $white-color;
  }

  &--secondary2 {
    background-color: $brand-color-2;
    color: $white-color;
  }

  &--secondary3 {
    background-color: $brand-color-3;
    color: $white-color;

  }

  &--secondary4 {
    background-color: $brand-color-4;
    color: $white-color;
  }

  &--search {
    background-color: $brand-color-3;
    color: $white-color;
    padding: 1.125rem 1.2rem;

    @include breakpoint(xl) {
      padding: 1.25rem 1.2rem;

    }

  }


  &--defult {
    background-color: $black-color;
    color: $white-color;
  }

  &.search-btn {
    padding: 1.2rem 1.85rem;
    @include font-size(18px);
  }



  span {
    position: inherit;
    z-index: 1;

    i,
    svg,
    img {
      @extend %ms-5;

    }
  }


  // &--small {
  //   // line-height: 46px;
  //   padding: 1.125rem 2.5rem;
  // }




  &:hover {
    color: $white-color;

    // home 1
    &.trk-btn--primary1 {
      color: $brand-color-1;
      transform: translateY(-3px);
    }

    &.trk-btn--secondary1 {
      transform: translateY(-3px);
    }


    // home 2
    &.trk-btn--secondary3,
    &.trk-btn--secondary2,
    &.trk-btn--primary2 {

      i,
      svg {
        @include add-prefix(transform, translateX(5px));
      }
    }

    // home 4
    &.trk-btn--style2 {
      transform: translateY(-3px);
    }

    &.trk-btn--primary4,
    &.trk-btn--secondary4 {

      i,
      svg {
        @include add-prefix(transform, translateX(5px));
      }
    }

    &.trk-btn--primary4 {
      color: $title-color;
    }

    &.trk-btn--defult {
      color: $white-color;

      i,
      svg {
        @include add-prefix(transform, translateX(5px));
      }
    }

    &.trk-btn--search {
      color: $white-color;

      i,
      svg {
        @include add-prefix (transform, rotate(10deg));
      }
    }

    &.trk-btn--apply {
      color: $secondary-color-1;
    }

  }

  &-active {
    &--style1 {
      background-color: $secondary-color-1;
      border-color: $secondary-color-1;
    }
  }

  &--secondary {
    background-color: transparent;
    color: $title-color;
    border-color: $title-color;


    &.brand-2 {
      border: 1.5px solid $brand-color-2;
      border-radius: 8px;
      padding: 1.125rem 1.85rem;

      @include breakpoint(xl) {
        @include font-size(18px);
        padding: 1.25rem 1.85rem;
      }
    }

    &.brand-3 {
      border: 1.5px solid $brand-color-3;
      padding: 1.125rem 1.85rem;

      @include breakpoint(xl) {
        @include font-size(18px);
        padding: 1.25rem 1.85rem;
      }
    }


    &:hover {
      color: $white-color;

      &.brand-2 {
        background-color: $brand-color-2;
      }

      &.brand-3 {
        background-color: $brand-color-3;
      }
    }
  }
}


.text-btn {
  @include add-prefix(transition, $transition);
  @extend %align-i-center;
  display: inline-flex;
  font-weight: 700;
  color: $title-color;

  &.text-btn--small {
    @extend %text-regular;
    @include font-size(16px);
    color: $title-color;
    font-family: $text-font;

    span {
      @extend %me-10;
      @include add-prefix(transition, $transition);
    }
  }

  span {
    @extend %ms-10;
    @include add-prefix(transition, $transition);
  }

  &:hover {
    span {
      @include add-prefix(transform, translateX(5px));
    }
  }
}


.btn-group {
  @extend %flex,
  %align-i-center;
  gap: 2rem;

  &--gap-xs {
    gap: .75rem;
  }

  &--gap-sm {
    gap: 1rem;
  }

  &--gap-md {
    gap: 1.5rem;
  }

  &--gap-lg {
    gap: 2rem;
  }
}


// tab button

.tab-btn {
  @extend %d-inline-block,
  %of-hidden,
  %text-center;
  @include font-size(16px);
  border: transparent;
  color: $brand-color-1;
  font-weight: 500;
  font-family: $text-font;
  // padding: 1rem 1.2rem;
  padding: .75rem 1rem;
  text-decoration: none;
  transition: $transition;
  text-transform: capitalize;
  line-height: 1;
  background: transparent;

  // @include breakpoint(xl) {
  //   padding: 1.25rem 1.85rem;
  // }
  @include breakpoint(xxl) {
    padding: 1.25rem 1.85rem;
  }
}