/*
===========================================================
Buttons
===========================================================
*/

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 15px 25px;
  transition: all var(--transitionLinear);
  font-size: 18px;
  font-family: var(--primaryFont);
  font-weight: 500;
  border-radius: 10px 0 10px 0;

  svg {
    transition: all var(--transitionLinear);
    position: relative;
    left: 0;

    path {
      transition: all var(--transitionLinear);
    }
  }

  &:hover {
    border-radius: 15px;

    svg {
      left: 5px;
    }
  }

  &.solid {
    &.white {
      color: var(--black);
      background-color: var(--white);
      border: 2px solid var(--white);

        svg {
          path {
            fill: var(--black);
          }
        }
    }

    &.black {
      color: var(--white);
      background-color: var(--black);
      border: 2px solid var(--black);

        svg {
          path {
            fill: var(--white);
          }
        }
    }

    &.green {
      color: var(--white);
      background-color: var(--green);
      border: 2px solid var(--green);

        svg {
          path {
            fill: var(--white);
          }
        }
    }

    &:hover {
      &.hoverWhite {
        color: var(--black);
        background-color: var(--white);
        border: 2px solid var(--white);

        svg {
          path {
            fill: var(--black);
          }
        }
      }

      &.hoverBlack {
        color: var(--white);
        background-color: var(--black);
        border: 2px solid var(--black);

        svg {
          path {
            fill: var(--green);
          }
        }
      }

      &.hoverGreen {
        color: var(--white);
        background-color: var(--green);
        border: 2px solid var(--green);

        svg {
          path {
            fill: var(--white);
          }
        }
      }
    }
  }

  &.outlined {
    &.white {
      color: var(--white);
      background-color: transparent;
      border: 2px solid var(--white);

        svg {
          path {
            fill: var(--white);
          }
        }
    }

    &.black {
      color: var(--black);
      background-color: transparent;
      border: 2px solid var(--black);

      svg {
        path {
          fill: var(--green);
        }
      }
    }

    &.green {
      color: var(--white);
      background-color: transparent;
      border: 2px solid var(--green);

      svg {
        path {
          fill: var(--white);
        }
      }
    }

    &:hover {
      &.hoverWhite {
        color: var(--black);
        background-color: var(--white);
        border: 2px solid var(--white);

        svg {
          path {
            fill: var(--green);
          }
        }
      }

      &.hoverBlack {
        color: var(--white);
        background-color: var(--black);
        border: 2px solid var(--black);

        svg {
          path {
            fill: var(--green);
          }
        }
      }

      &.hoverGreen {
        color: var(--white);
        background-color: var(--green);
        border: 2px solid var(--green);

        svg {
          path {
            fill: var(--black);
          }
        }
      }
    }
  }

  .btn-text {
    display: block;
    position: relative;
    transition: all var(--transitionLinear);
    left: 0;
  }
}