.Button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: rem(8px) rem(10px);
  border-radius: rem(16px);
  min-height: rem(40px);

  font-family: $font-roboto;
  font-weight: $font-regular;
  font-size: rem(16px);
  line-height: 100%;

  transition: all 0.15s linear;
  white-space: nowrap;
  width: max-content;

  @include ifdesktop{
    font-size: rem(20px);
    border-radius: rem(16px);
    padding: rem(4px) rem(24px);
    min-height: rem(48px);
  }

  &_fullWidth {
    width: 100%;
  }

  svg {
    width: rem(18px);
    height: rem(18px);
    //fill: var(--text-primary);

    margin-right: rem(18px);
  }

  &:hover {
    cursor: pointer;
    box-shadow: 1px 1px 1px 0px $color-darkgray;
  }

  &:active {
    box-shadow: inset 1px 1px 2px 0px $color-darkgray;
  }

  &:hover svg {
    fill: var(--white);
  }

  &_default {
    background: $color-green;
    color: $color-white;
  }

  &_green {
    background: $color-green;
    color: $color-white;
  }

  &_ghost {
    background: transparent;
    color: $color-white;
    border: 1px solid $color-white;

    &:hover {
      cursor: pointer;
      box-shadow: 0 0 0 0.2rem rgb(76 175 80 / 50%);
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    &:active {
      box-shadow: 0 0 0 0.2rem rgb(76 175 80 / 50%);
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    &:hover svg {
      fill: var(--white);
    }
  }

  &_white {
    background: $color-white;
    color: $color-green;
    border: 1px solid $color-green;

    &:hover {
      cursor: pointer;
      box-shadow: 0 0 0 0.2rem rgb(76 175 80 / 50%);
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    &:active {
      box-shadow: 0 0 0 0.2rem rgb(76 175 80 / 50%);
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    &:hover svg {
      fill: var(--white);
    }
  }

  &_disabled {
    cursor: not-allowed;
  }
}