Invalid property value for paragraph tag with border bottom line

I have header component where active element is shown with bottom border line with padding. Here is this component with styles.

<div class="account-header">
  <div class="account-header-inner">
    <div v-for="item in accountHeaderItems" :key="item.title" :class="[item.active ? 'active' : '']" class="item-box">
      <p :class="[item.active ? 'active' : '']" class="item" @click="changeSubpage(item)">
        {{item.title}}
      </p>
    </div>
  </div>
</div>

And styles:

.account-header {
  width: 100%;
  height: 50px;
  display: flex;
  position: absolute;
  .account-header-inner {
    width: 50%;
    margin: 0 auto;
    display: flex;
    border-bottom: 1px solid v.$main-color-light;
    @media only screen and (max-width: 930px) { width: 100%; }
    .item-box {
      height: calc(100% - 15px);
      padding-top: 15px;
      margin: 0 auto;
      &.active { border-bottom: 3px solid v.$main-color; }
      .item {
        cursor: pointer;
        margin: 0;
        color: rgba(#fff, 0.5);
        transition: .2s;
        &.active { color: v.$main-color-light;}
        @media screen and (max-width: 520px) { font-size: 12px; }
      }
      .item:hover { color: v.$main-color-light; }
    }
  }
}

So, on matter how and where I try to add padding bottom to active element it doesn't work and on page it looks like this:

Also, when I was trying to fix it in browser styles, it says Invalid property value.

I can't get what is wrong. It doesn't seem like I overwrite styles somewhere else in my project.

EDIT

Look how it looks like when I set padding-bottom property:

.item-box {
      height: calc(100% - 15px);
      padding-top: 15px;
      margin: 0 auto;
      &.active { border-bottom: 3px solid v.$main-color; }
      .item {
        cursor: pointer;
        margin: 0;
        color: rgba(#fff, 0.5);
        transition: .2s;
        &.active { color: v.$main-color-light;  padding-bottom: 15px; }
        @media screen and (max-width: 520px) { font-size: 12px; }
      }
      .item:hover { color: v.$main-color-light; }
    }