.tab-with-corner {
  border: 1px solid #393939;
  display: inline-flex;
  padding: 0.68rem .625rem;
  position: relative;
  z-index: 1;
  background-color: $primary-invert;

  &:before, &:after {
    position: absolute;
    border: 1px solid #393939;
    transform-origin: bottom left;
    width: 2.5em;
    top: 0;
    bottom: 0;
    background-color: $primary-invert;
    z-index: -1;
  }

  span.is-small {
    font-size: .7rem;
    line-height: 2.9;

    @include until(375px) {
      font-size: .6rem;
      line-height: 2.8;
    }
  }

  &.is-left-bottom {
    padding-left: 1.75rem;
    border-top-width: 0;
    border-right-width: 0;
    margin-right: 1.75rem;
    border-bottom-left-radius: 4px;

    @include until(375px) {
      padding-left: 1.5rem;
      padding-right: .75rem;
    }

    &:after {
      content: '';
      right: -1rem;
      transform: skewX(-20deg);
      border-bottom-right-radius: 4px;
      border-top-width: 0;
      border-left-width: 0;
      bottom: -1px;
    }
  }

  &.is-right-bottom {
    margin-left: auto;
    padding-right: 1.75rem;
    border-top-width: 0;
    border-left-width: 0;
    border-bottom-right-radius: 4px;

    @include until(375px) {
      padding-right: 1.5rem;
      padding-left: .75rem;
    }

    &:before {
      content: '';
      left: -1rem;
      transform: skewX(20deg);
      border-bottom-left-radius: 4px;
      border-right-width: 0;
      border-top-width: 0;
      bottom: -1px;

      @include until(375px) {
        left: -.5rem;
      }
    }
  }

  &.is-left-top {
    padding-left: 1.75rem;
    border-bottom-width: 0;
    border-right-width: 0;
    margin-right: 1.75rem;
    border-top-left-radius: 4px;

    @include until(375px) {
      padding-left: 1.5rem;
      padding-right: .75rem;
    }

    &:after {
      content: '';
      right: -1rem;
      transform: skewX(20deg);
      border-top-right-radius: 4px;
      border-left-width: 0;
      border-bottom-width: 0;
      top: -1px;

      @include until(375px) {
        right: -.5rem;
      }
    }
  }

  &.is-primary {
    border-color: $primary;

    &:before, &:after {
      border-color: $primary;
    }
  }
}