@button-line-height: 1.5;
@button-padding: 1rem 5rem 1rem 2rem;
.btn {
  &__container {
    margin-top: @btn-margin;
  }

  &-text {
    .button-text;
  }

  &-text {
    //background-color: transparent;
    //color: @btn-color-inverted;
    border-radius: 5px;

    .no-touch &:not(.is-disabled):hover {
      //background-color: #fff;
      //color: #005EEF;
      .transition(background-color @duration ease-in, color @duration ease-in;);
    }
  }

  &-text.is-disabled {
    background-color: #a5a19d !important;
    color: @disabled-inverted !important;
    &:hover{
      background-color: #a5a19d !important;
      color: @disabled-inverted !important;
    }
  }

  &__marking {
    padding: @item-padding * 0.75;
    border-radius: 50%;
  }

  &.btn-primary {
    padding: @button-padding;
    background-color: #58009c;
    color: #fff;
    font-weight: 500;
    line-height: @button-line-height;
    // text-transform: uppercase;
    transition: all 500ms;
    position: relative;
    overflow: hidden;
    svg {
      display: inline;
      margin: 0;
      padding: 0;
      fill: currentColor;
      max-width: 1em;
      vertical-align: middle;
      position: absolute;
      right: 1rem;
      top: 54%;
      transform: translateY(-50%);
    }
    span.mid-line {
      display: inline-block;
      width: 3px;
      color: @sunset-red;
      background-color: currentColor;
      height: 100%;
      margin-left: 5px;
      margin-right: 5px;
      position: absolute;
      bottom: -0.25rem;
      right: 3rem;
      &:before {
        content: "";
        background-color: currentColor;
        position: absolute;
        top: -20px;
        width: 3px;
        height: 3.5rem;
      }
      @media screen and (max-width: 850px) {
        display: none;
      }
    }
    &:hover,
    &:active {
      background-color: @royal-purple;
      color: @glass-blue;
    }
    @media screen and (max-width: 850px) {
      border-top-left-radius: 2rem;
      border-bottom-left-radius: 2rem;
      padding:1rem 3rem 1rem 1.5rem;
      background-color: @blue-primary;
      color: @white-text;
      font-size: 14px;   
      svg {
        margin-left: 5px;
      }
    }
    
    // &:after {
    //   content: "";
    //   position: absolute;
    //   width: 250%;
    //   height: 250%;
    //   transform: rotate(-15deg);
    //   right: 250%;
    //   background-color: @royal-purple;
    //   transition: all 750ms;
    //   top: -30%;
    //   z-index: 0;
    // }

    // &:hover:after {
    //     right: -50%;
    // }
    // &:hover *{
    //   position: relative;

    // }
  }
}
