.sgds{
  &-sec-button{
    color: $primary;
    display: block;
    font-size: $size-7;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1;
    background-color: transparent;
    border: none;

    &.is-small{
      @include button-small();
    }

    &.is-medium{
      @include button-medium();
    }

    &.is-large{
      @include button-large();
    }

    &::after{
      font-family: 'sgds-icons';
      content: $sgds-icon-arrow-right;
    }
    &:hover{
      color: darken($primary,10%);
      border-color: darken($primary,10%);
    }

    span{
      margin-right:0.5rem;
      border-bottom:2px solid $primary;
      &:hover{
        color: darken($primary,10%);
        border-color: darken($primary,10%);
      }
    }

    &.is-not-underlined{
      &::after{
        content: none;
      }
      span{
        margin:0;
        border:0;
      }
      &.is-active{
        span{
          border-bottom:2px solid $primary;
        }
      }
    }

    @each $name, $pair in $colors{
      $color: nth($pair,1);
      $color-invert: nth($pair,2);
      &.is-#{$name}{
        color: $color;
        &:hover{
          color: darken($color,10%);
          border-color: darken($color,10%);
        }
        span{
          border-color:$color;
          &:hover{
            color: darken($color,10%);
            border-color: darken($color,10%);
          }
        }
        .content &{
          &.is-active{
            span{
              border-bottom:2px solid $color;
            }
          }
        }
      }
    }
  }
}