// =======================================================
// 🔘 Buttons Styles (_buttons.scss)
// =======================================================

.btn-style{
  height: 48px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: $white;
  font-family: $calibre;
  background: $primary-01;
  border: 1px solid $primary-01;
  border-radius: 50px;
  text-decoration: none;
  padding: 12px 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease-in-out;
  @media screen and (max-width: $screen-xs) {
    height: 42px;
    font-size: 18px;
    line-height: 26px;
  }
  &:hover{
    background: $primary-01;
    color: $white;
    &:after{
      left: -30%;
      opacity: 1;
      top: -20%;
      transition-duration: .7s, .7s, .15s;
      transition-property: left, top, opacity;
      transition-timing-function: linear;
    }
  }
  &:after{
    content: "";
    height: 200%;
    width: 200%;
    position: absolute;
    left: -210%;
    top: -50%;
    background: linear-gradient(90deg, hsla(0, 0%, 100%, .13), hsla(0, 0%, 100%, .13) 77%, hsla(0, 0%, 100%, .4) 92%, hsla(0, 0%, 100%, 0));
    opacity: 0;
    transition: all .7s ease 0s;
  }

  &.btn-md{
    height: 40px;
    padding: 10px 22px 12px;
    font-size: 20px;
    line-height: 26px;
  }

  &.btn-sm{
    height: 38px;
    font-size: 18px;
    line-height: 24px;
    padding: 11px 18px;
  }

  &.btn-xs{
    height: 32px;
    font-size: 14px;
    line-height: 16px;
    padding: 8px 14px;
    &.icon{
      gap: 6px;
      img{
        max-height: 14px;
      }
    }
    >span{
      font-size: 17px;
      line-height: 24px;
    }
  }

  &.icon{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    img{
      max-width: 20px;
    }
  }

  &.w-100{
    min-width: 100%;
  }

  // Primary Button Start
  &.btn-primary{
    background: $primary-01;
    border-color: $primary-01;
    &:hover{
      background: $primary-01;
      border-color: $primary-01;
    }

    &.icon{
      img{
        filter: $white-filter;
      }
    }

    &.dark{
      border-color: $purple-01;
      background: $purple-01;
      &:hover{
        border-color: $purple-01;
        background: $purple-01;
      }
    }

    &.shadow{
      box-shadow: $box-shadow-01;
    }

    &.disable{
      color: $cool-gray-03;
      user-select: none;
      pointer-events: none;
      background: $bg-01;
      border-color: $bg-01;
      &:hover{
        color: $cool-gray-03;
        background: $bg-01;
        border-color: $bg-01;
      }
      &.icon{
        img{
          filter: $btn-disable-filter;
        }
      }
    }
  }
  // Primary Button End

  // Red Button Start
  &.btn-red{
    background: $red-01;
    border-color: $red-01;
    &:hover{
      background: $red-01;
      border-color: $red-01;
    }

    &.icon{
      img{
        filter: $white-filter;
      }
    }

    &.shadow{
      box-shadow: $box-shadow-01;
    }

    &.disable{
      color: $cool-gray-03;
      user-select: none;
      pointer-events: none;
      background: $bg-01;
      border-color: $bg-01;
      &:hover{
        color: $cool-gray-03;
        background: $bg-01;
        border-color: $bg-01;
      }
      &.icon{
        img{
          filter: $btn-disable-filter;
        }
      }
    }
  }
  // Red Button End

  // Black Button Start
  &.btn-black{
    color: $white;
    background: $black;
    border-color: $black;
    &:hover{
      color: $white;
      background: $black;
      border-color: $black;
    }

    &.icon{
      img{
        filter: $white-filter;
      }
    }

    &.shadow{
      box-shadow: $box-shadow-01;
    }

    &.disable{
      color: $cool-gray-03;
      user-select: none;
      pointer-events: none;
      background: $bg-01;
      border-color: $bg-01;
      &:hover{
        color: $cool-gray-03;
        background: $bg-01;
        border-color: $bg-01;
      }
      &.icon{
        img{
          filter: $btn-disable-filter;
        }
      }
    }
  }
  // Black Button End

  // Transparent Button Start
  &.btn-transparent{
    color: $primary-01;
    background: transparent;
    border: 2px solid $primary-01;
    &:hover{
      color: $primary-01;
      background: transparent;
      border-color: $primary-01;
    }

    &.icon{
      img{
        filter: $primary-filter;
      }
    }

    &.shadow{
      box-shadow: $box-shadow-01;
    }

    &.disable{
      color: $cool-gray-03;
      border-color: $border-01;
      background: transparent;
      pointer-events: none;
      &:hover{
        border-color: $border-01;
        background: transparent;
      }

      &.icon{
        img{
          filter: $btn-disable-filter;
        }
      }
    }

    &.white{
      color: $white;
      background: transparent;
      border-color: $white;
      &:hover{
        color: $white;
        background: transparent;
        border-color: $white;
      }
      &.icon{
        img{
          filter: $white-filter;
        }
      }
    }
  }
  // Transparent Button End

  // Text Button Start
  &.btn-text{
    color: $primary-01;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 0;
    &:hover{
      color: $primary-01;
      background: transparent;
      border-color: transparent;
    }
    &:after{
      display: none;
    }

    &.no-padding{
      height: auto;
      padding: 0;
    }

    img{
      filter: $primary-filter;
    }

    &.w-500{
      font-weight: 500;
    }
    &.w-600{
      font-weight: 600;
    }
    &.f-24{
      font-size: 24px;
      line-height: 32px;
      @media screen and (max-width: 991px) {
        font-size: 20px;
        line-height: 28px;
      }
    }
    &.underline{
      text-decoration: underline;
    }

    &.text-black{
      color: $black;
      &:hover{
        color: $black;
      }

      /*&.w-500{
        font-weight: 500;
      }*/

      &.icon{
        img{
          filter: $black-filter;
        }
      }
    }

    &.disable{
      border: unset;
      pointer-events: none;
      color: $cool-gray-03;
      background: transparent;
      &:hover{
        color: $cool-gray-03;
      }
      &.icon{
        img{
          filter: $btn-disable-filter;
        }
      }
    }
  }
  // Text Button End
}

.btn-circle{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: $primary-01;
  border: 1px solid $primary-01;
  transition: all .3s ease-in-out;
  img{
    max-width: 20px;
  }
  &:hover{
    &:after{
      left: -30%;
      opacity: 1;
      top: -20%;
      transition-duration: .7s, .7s, .15s;
      transition-property: left, top, opacity;
      transition-timing-function: linear;
    }
  }
  &:after{
    content: "";
    height: 200%;
    width: 200%;
    position: absolute;
    left: -210%;
    top: -50%;
    background: linear-gradient(90deg, hsla(0, 0%, 100%, .13), hsla(0, 0%, 100%, .13) 77%, hsla(0, 0%, 100%, .2) 92%, hsla(0, 0%, 100%, 0));
    opacity: 0;
    transition: all .7s ease 0s;
  }

  &.btn-md{
    width: 44px;
    height: 44px;
  }

  &.btn-sm{
    width: 40px;
    height: 40px;
  }

  &.btn-xs{
    width: 36px;
    height: 36px;
  }

  // Primary Button Start
  &.btn-primary{
    background: $primary-01;
    border-color: $primary-01;
    &:hover{
      background: $primary-01;
      border-color: $primary-01;
    }

    img{
      filter: $white-filter;
    }

    &.shadow{
      box-shadow: $box-shadow-01;
    }

    &.disable{
      border-color: $cool-gray-01;
      background: $cool-gray-01;
      pointer-events: none;
      &:hover{
        border-color: $cool-gray-01;
        background: $cool-gray-01;
      }
    }

  }
  // Primary Button End

  // Transparent Button Start
  &.btn-transparent{
    background: transparent;
    border: 2px solid $primary-01;
    &:hover{
      background: transparent;
      border-color: $primary-01;
    }
    img{
      filter: $primary-filter;
    }

    &.shadow{
      box-shadow: $box-shadow-01;
    }

    &.disable{
      color: $cool-gray-01;
      border-color: $cool-gray-01;
      background: transparent;
      pointer-events: none;
      &:hover{
        border-color: $cool-gray-01;
        background: transparent;
      }
      img{
        filter: brightness(0) saturate(100%) invert(93%) sepia(0%) saturate(0%) hue-rotate(205deg) brightness(88%) contrast(83%);
      }
    }
  }
  // Transparent Button End

  // Text Button Start
  &.btn-text{
    background: transparent;
    border: 2px solid transparent;
    &:hover{
      background: transparent;
      border-color: transparent;
    }
    &:after{
      display: none;
    }

    img{
      filter: $primary-filter;
    }

    &.disable{
      pointer-events: none;
      img{
        filter: $btn-disable-filter;
      }
    }
  }
  // Text Button End
}

.btn-tag{
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  color: $white;
  font-family: $calibre;
  background: $primary-01;
  border: 1px solid $primary-01;
  border-radius: 6px;
  text-decoration: none;
  padding: 3px 19px 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease-in-out;
  &:hover{
    color: $white;
  }

  &.icon{
    padding: 3px 12px 3px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    img{
      max-width: 10px;
    }
  }

  &.r-50{
    border-radius: 50px;
  }

  &.shadow{
    box-shadow: $box-shadow-01;
  }

  // Primary Button Start
  &.tag-primary{
    background: $primary-01;
    border-color: $primary-01;
    &:hover{
      background: $primary-01;
      border-color: $primary-01;
    }
    &.icon{
      img{
        filter: $white-filter;
      }
    }
    &.transparent{
      color: $primary-01;
      background: transparent;
      border: 1px solid $primary-01;
      &:hover{
        color: $primary-01;
        background: transparent;
        border-color: $primary-01;
      }
      &.icon{
        img{
          filter: $primary-filter;
        }
      }
    }
  }
  // Primary Button End

  // Primary Button Start
  &.tag-red{
    background: $tag-red;
    border-color: $tag-red;
    &:hover{
      background: $tag-red;
      border-color: $tag-red;
    }
    &.icon{
      img{
        filter: $white-filter;
      }
    }
    &.transparent{
      color: $tag-red;
      background: transparent;
      border: 1px solid $tag-red;
      &:hover{
        color: $tag-red;
        background: transparent;
        border-color: $tag-red;
      }
      &.icon{
        img{
          filter: $tag-red-filter;
        }
      }
    }
  }
  // Primary Button End

  // Gray Button Start
  &.tag-gray{
    background: $tag-gray;
    border-color: $tag-gray;
    &:hover{
      background: $tag-gray;
      border-color: $tag-gray;
    }
    &.icon{
      img{
        filter: $white-filter;
      }
    }
    &.transparent{
      color: $tag-gray;
      background: transparent;
      border: 1px solid $tag-gray;
      &:hover{
        color: $tag-gray;
        background: transparent;
        border-color: $tag-gray;
      }
      &.icon{
        img{
          filter: $tag-gray-filter;
        }
      }
    }
  }
  // Gray Button End

  // Orange Button Start
  &.tag-orange{
    background: $tag-orange;
    border-color: $tag-orange;
    &:hover{
      background: $tag-orange;
      border-color: $tag-orange;
    }
    &.icon{
      img{
        filter: $white-filter;
      }
    }
    &.transparent{
      color: $tag-orange;
      background: transparent;
      border: 1px solid $tag-orange;
      &:hover{
        color: $tag-orange;
        background: transparent;
        border-color: $tag-orange;
      }
      &.icon{
        img{
          filter: $tag-orange-filter;
        }
      }
    }
  }
  // Orange Button End

  // Green Button Start
  &.tag-green{
    background: $tag-green;
    border-color: $tag-green;
    &:hover{
      background: $tag-green;
      border-color: $tag-green;
    }
    &.icon{
      img{
        filter: $white-filter;
      }
    }
    &.transparent{
      color: $tag-green;
      background: transparent;
      border: 1px solid $tag-green;
      &:hover{
        color: $tag-green;
        background: transparent;
        border-color: $tag-green;
      }
      &.icon{
        img{
          filter: $tag-green-filter;
        }
      }
    }
  }
  // Green Button End

  // Indigo Button Start
  &.tag-indigo{
    background: $tag-indigo;
    border-color: $tag-indigo;
    &:hover{
      background: $tag-indigo;
      border-color: $tag-indigo;
    }
    &.icon{
      img{
        filter: $white-filter;
      }
    }
    &.transparent{
      color: $tag-indigo;
      background: transparent;
      border: 1px solid $tag-indigo;
      &:hover{
        color: $tag-indigo;
        background: transparent;
        border-color: $tag-indigo;
      }
      &.icon{
        img{
          filter: $tag-indigo-filter;
        }
      }
    }
  }
  // Indigo Button End

  // Purple Button Start
  &.tag-purple{
    background: $tag-purple;
    border-color: $tag-purple;
    &:hover{
      background: $tag-purple;
      border-color: $tag-purple;
    }
    &.icon{
      img{
        filter: $white-filter;
      }
    }
    &.transparent{
      color: $tag-purple;
      background: transparent;
      border: 1px solid $tag-purple;
      &:hover{
        color: $tag-purple;
        background: transparent;
        border-color: $tag-purple;
      }
      &.icon{
        img{
          filter: $tag-purple-filter;
        }
      }
    }
  }
  // Purple Button End

  // Soft Green Button Start
  &.tag-soft-green{
    color: $tag-green;
    background: $tag-soft-green;
    border-color: $tag-soft-green;
    &:hover{
      background: $tag-soft-green;
      border-color: $tag-soft-green;
    }
    &.icon{
      img{
        filter: $white-filter;
      }
    }
  }
  // Soft Green Button End

  // Soft Orange Button Start
  &.tag-soft-orange{
    color: $tag-orange;
    background: $tag-soft-orange;
    border-color: $tag-soft-orange;
    &:hover{
      background: $tag-soft-orange;
      border-color: $tag-soft-orange;
    }
    &.icon{
      img{
        filter: $white-filter;
      }
    }
  }
  // Soft Orange Button End

  // Soft Red Button Start
  &.tag-soft-red{
    color: $tag-red;
    background: $tag-soft-red;
    border-color: $tag-soft-red;
    &:hover{
      background: $tag-soft-red;
      border-color: $tag-soft-red;
    }
    &.icon{
      img{
        filter: $white-filter;
      }
    }
  }
  // Soft Red Button End

  // Soft Gray Button Start
  &.tag-soft-gray{
    color: $tag-dark-gray;
    background: $tag-soft-gray;
    border-color: $tag-soft-gray;
    &:hover{
      background: $tag-soft-gray;
      border-color: $tag-soft-gray;
    }
    &.icon{
      img{
        filter: $white-filter;
      }
    }
  }
  // Soft Gray Button End


  // Soft Blue Button Start
  &.tag-soft-blue{
    color: $tag-blue;
    background: $tag-soft-blue;
    border-color: $tag-soft-blue;
    &:hover{
      background: $tag-soft-blue;
      border-color: $tag-soft-blue;
    }
    &.icon{
      img{
        filter: $white-filter;
      }
    }
  }
  // Soft Blue Button End


  // Soft Purple Button Start
  &.tag-soft-purple{
    color: $tag-purple;
    background: $tag-soft-purple;
    border-color: $tag-soft-purple;
    &:hover{
      background: $tag-soft-purple;
      border-color: $tag-soft-purple;
    }
    &.icon{
      img{
        filter: $white-filter;
      }
    }
  }
  // Soft Purple Button End


  // Transparent Tag Start
  &.transparent{
    color: $primary-01;
    background: transparent;
    border: 1px solid $primary-01;
    &:hover{
      color: $primary-01;
      background: transparent;
      border-color: $primary-01;
    }
    &.icon{
      img{
        filter: $primary-filter;
      }
    }
  }
  // Transparent Tag End
}