@use "variables" as *;
@use "mixins" as *;

%button_all {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 0 20px;
  background-color: $main_color;
  color: $black_color;
  border: 0;
  box-shadow: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: $weight_bold;
  @include border_radius(25px);
  @include transition(0.3s all linear);
  &:hover {
    color: #fff;
    background-color: $second_color;
  }

  &.more {
    margin: 15px auto 0 !important;
  }
  &.white {
    border: 1px solid #fff;
    background-color: transparent;
    color: $second_color;
    &:hover {
      background-color: $second_color;
      color: #fff;
      border: none;
    }
  }
}
%button_icon {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  margin-bottom: 15px;
  line-height: 40px;
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 14px;
  padding: 0;
  background-color: $second_color;
  color: #fff;
  border: 0;
  box-shadow: none;
  @include border_radius(50%);
  @include transition(0.3s all linear);
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    clip-path: circle(0% at 50% 100%);
    background-color: $main_color;
    @include transition(0.3s all linear);
  }

  i,
  &::before {
    z-index: 999;
    position: relative;
  }
  &:hover {
    color: $black_color;
    &::after {
      clip-path: circle(100% at 50% 50%);
    }
    i,
    &::before {
      color: $black_color;
    }
  }
}

%flex {
  @include flex(row, space-between, center);
}
// use Placholder
.link {
  @extend %button_all;
}
.icon {
  @extend %button_icon;
}
.flex {
  @extend %flex;
}
