@charset "UTF-8";
webforms-component{
  .btn-small {
    font-family: "Korb";
    display: inline-block;
    position: relative;
    background-color: $color-primary;
    background-color: var(--theme-color-primary, $color-primary);
    color: $color-white;
    color: var(--theme-color-background, $color-white);
    padding: 5px 18px;
    border-radius: 18px;
    margin-right: 10px;
    text-decoration: none;
    transition: 0.3s ease;
    @include focusvisible;
  }

  .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: "Korb";
    background-color: $color-primary;
    background-color: var(--theme-color-primary, $color-primary);
    color: $color-white;
    color: var(--theme-color-background, $color-white);
    border-radius: $radius-lg;
    font-size: 22px;
    line-height: 1;
    padding: 16px 24px;
    text-decoration: none;
    border: 0;
    min-height: 60px;
    @include focusvisible;
    cursor: pointer;
    font-weight: 400;

    @media(max-width: 767px) {
      font-size: 18px;
      padding: 12px 20px;
      min-height: 44px;
      border-radius: 16px;
      white-space: normal;
    }

    &:hover {
      color: $color-white;
      box-shadow: 0 0 0 5px rgba($color-primary, 0.3);
      box-shadow: 0 0 0 5px rgba(var(--theme-color-primary-rgb, $color-primary-rgb), 0.3);
    }

    &.has-icon {
      padding-right: 58px;
      overflow: hidden;
      transition: 0.3s $easeOutQuad;
      text-align: left;

      @media(max-width: 767px) {
        padding-right: 52px;
      }

      &:before {
        position: absolute;
        font-size: 30px;
        right: 18px;
        top: 50%;
        margin-top: -15px;
        font-family: "Icons";
        transition: 0.3s $easeOutQuad;
        transform: translate3d(0, 0, 0);

        @media(max-width: 767px) {
          font-size: 24px;
          margin-top: -12px;
        }
      }

      &.icon-pfeil-links {
        padding: 16px 24px 16px 58px;

        &:before {
          right: auto;
          left: 18px;
        }

        @media(max-width: 767px) {
          padding: 12px 20px 12px 52px;
        }
      }
    }

    &.white {
      background-color: $color-white;
      background-color: var(--theme-color-background, $color-white);
      color: $color-primary;
      color: var(--theme-color-primary, $color-primary);

      &:hover {
        box-shadow: 0 0 0 5px rgba($color-white, 0.5), 0 0 4px rgba($color-black, 0.4);
        color: $color-primary;
        color: var(--theme-color-primary, $color-primary);
      }
    }

    &.secondary {
      background-color: $color-secondary;
      background-color: var(--theme-color-secondary, $color-secondary);
      color: $color-primary;
      color: var(--theme-color-primary, $color-primary);

      &:hover {
        box-shadow: 0 0 0 5px rgba($color-secondary, 0.4), 0 0 4px rgba($color-black, 0.1);
        color: $color-primary;
        color: var(--theme-color-primary, $color-primary);
      }
    }
  }

  [data-browser="ie"] .btn {
    height: 60px;
  }

  .btn-light {
    position: relative;
    display: inline-block;
    background-color: $color-primary-light-03;
    background-color: var(--theme-color-primary-dimmed-03, $color-primary-light-03);
    padding: 6px 18px;
    border-radius: 18px;
    margin-right: 10px;
    text-decoration: none;
    transition: 0.3s ease;
    @include focusvisible;
    font-family: "Korb";
    transition: 0.3s ease;

    &.has-icon {
      padding-left: 54px;

      &:before {
        position: absolute;
        font-family: "Icons";
        font-size: 30px;
        line-height: 1;
        top: 50%;
        left: 15px;
        margin-top: -15px;
      }

      &.icon-pfeil-links:before {
        margin-top: -14px;
      }
    }

    &:hover {
      text-decoration: none;
      color: $color-primary;
      color: var(--theme-color-primary, $color-primary);
      box-shadow: 0 0 0 5px rgba($color-primary-light-03, 0.4);
    }
  }

  button::-moz-focus-inner {
    border: 0;
  }

}