// >>-- 09 Button css start --<<

$colors: (
        primary: var(--primary),
        secondary: var(--secondary),
        success: var(--success),
        danger: var(--danger),
        warning: var(--warning),
        info: var(--info),
        light: var(--light),
        dark: var(--dark),
        white: var(--white),
        primary-dark: var(--primary-dark),
        secondary-dark: var(--secondary-dark),
        success-dark: var(--success-dark),
        danger-dark: var(--danger-dark),
        warning-dark: var(--warning-dark),
        info-dark: var(--info-dark),
        dark-dark:var(--dark-dark),
        dark-light:var(--dark-light),
        //light-dark: (--light-dark),
        facebook : var(--facebook),
        twitter : var(--twitter),
        pinterest : var(--pinterest),
        linkedin : var(--linkedin),
        reddit : var(--reddit),
        whatsapp : var(--whatsapp),
        gmail : var(--gmail),
        telegram : var(--telegram),
        youtube : var(--youtube),
        vimeo : var(--vimeo),
        behance : var(--behance),
        github : var(--github),
        skype : var(--skype),
        snapchat : var(--snapchat),
);

@mixin btn_mixin($name, $color, $light-color: null) {

  $light-color: if($light-color == null, $color, $light-color);

  .btn-#{$name} {
    background-color: rgba(#{$color}, 1);
    border: 1px solid rgba(#{$color}, 1);
    color: rgba(var(--white), 1);

    &:hover, &:active, &.active, &.show, &:checked, &:focus, &:focus-visible, &.disabled {
      background-color: rgba(#{$color}, 1) !important;
      border-color: rgba(#{$color}, 1) !important;
      transition: var(--app-transition);
    }
  }

  .btn-outline-#{$name} {
    background-color: transparent;
    color: rgba(#{$color}, 1);
    border: 1px solid rgba(#{$color}, 1) !important;

    &:hover, &.active, &.show, &:checked, &:focus, &:focus-visible {
      background-color: rgba(#{$color}, 1);
      color: rgba(var(--white), 1);
    }
  }

  .btn-light-#{$name} {
    background-color: rgba(#{$color}, 0.30);
    //color: rgba(#{$color},1) ;
    color: rgba(#{$light-color}, 1);
    border-color: transparent;

    &:hover, &.active, &.show, &:checked, &:focus, &:focus-visible {
      background-color: rgba(#{$color}, 0.40);
      border-color: rgba(#{$light-color}, 1);
      color: rgba(#{$light-color}, 1);
    }
    &.disabled {
      background-color: rgba(#{$color}, 0.10);
      border-color: rgba(#{$light-color}, 0.6);
      color: rgba(#{$light-color}, 0.8);
    }
    &.btn-light-light{
      color: rgba(var(--dark-light),1) !important;
    }
  }
}

@each $name, $color in $colors {
  @include btn_mixin("#{$name}", map-get($colors, $name), map-get($colors, "#{$name}-dark"));
}

.btn {
  font-weight: 600;

  &.active, &:hover {
    position: relative;

    &::before {
      content: "";
      width: 100%;
      height: 100%;
      background-color: rgba(var(--dark), 0.03);
      position: absolute;
      left: 0;
      top: 0;
      transition: all 0.3s ease;
    }
  }

  &.btn-link {
    color: rgba(var(--primary), 1);
  }

  //&.btn-light-warning,
  //&.btn-outline-warning,
  //&.btn-warning {
  //  color: rgba(var(--dark), .75);
  //}

  &.icon-btn {
    height: 37px;
    width: 37px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 1;
  }
}

.btn-group-xs > .btn, .btn-xs {
  padding: 3px 15px;
  font-size: 13px;
}

.btn-group-sm > .btn, .btn-sm {
  padding: 4px 20px;
  font-size: 14px;
}

.btn-group-lg > .btn, .btn-lg {
  padding: 6px 30px;
  font-size: 18px;
}

.btn-group-xl > .btn, .btn-xl {
  padding: 8px 35px;
  font-size: 20px;
}

.btn-group-xxl > .btn, .btn-xxl {
  padding: 10px 40px;
  font-size: 22px;
}

button {
  &:focus {
    &:not(:focus-visible) {
      outline: none !important;
    }
  }
}

.btn-group,
.btn-group-vertical {
  vertical-align: middle;
  flex-wrap: wrap;
  justify-content: center;
}


@mixin border_mixin($name, $color) {
  .b-#{$name} {
    border: 1px solid rgba (#{$color}, 1);
  }
}

@each $name, $color in $colors {
  @include border_mixin("#{$name}", map-get($colors, $name));
}

.app-btn-list {
  margin-bottom: -10px;

  > .btn {
    margin-bottom: 10px;
    margin-right: 8px;

    &:last-child {
      margin-right: 0;
    }
  }
}

.text-lead {
  font-size: 16px;
  font-weight: 400;
}

.main-title {
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 10px;
}

// >>-- 09 Button css end --<<