@import '~styles/mixins';
@import '~styles/common';

.invoicing-info {
  @include accountInformation;

  $padding_v: 12px;
  $padding_side: 30px;
  .toggle-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .toggle {
      cursor: pointer;
      padding: $padding_v 15px;
      background-color: white;
      border-top: solid 2px $color-green;
      border-left: solid 2px $color-green;
      border-bottom: solid 2px $color-green;
      font-weight: 700;
      font-size: 16px;
      color: $color-green;
      @include transition(all);
      &:first-child {
        // border: solid 2px $color-green;
        border-radius: 50px 0 0 50px;
        padding-left: $padding_side;
      }
      &:last-child {
        border-right: solid 2px $color-green;
        border-radius: 0 50px 50px 0;
        padding-right: $padding_side;
      }
      &.active {
        color: white;
        background-color: $color-green;
      }
      &:hover {
        color: white;
        background-color: $color-green;
      }
    }
  }
  .add {
    max-width: 500px;
  }
}
