/* *****************************************************************************
*
*  Button label
*
* ***************************************************************************** */

.btn-label {
  @extend .border;
  @extend .px-3;
  position: relative;
  margin-top: $spacer-2;
  border-top: 0 !important;
  border-top-left-radius: 0;
  border-top-right-radius: 0;

  @each $themeColor, $value in $theme-colors {
    &--#{$themeColor} {
      @include plain-hover-focus(){
        background: $value;
      }

      &:before{
        background: $value;
      }
    }
  }

  // white spacing
  &:before {
    @extend .position-absolute--top;
    @include size(100vw, $spacer-2);
    transform: translate(-50%, -100%);
    content: "";
    z-index: -1;
  }

  // Line gray separator
  &:after {
    @extend .position-absolute--top;
    @include size(100vw, 1px);
    content: "";
    z-index: -1;
    background: $border-color;
  }
}