Tab.vue - styles

Tab.vue

<style scoped>
.tab {
  flex: 1 1 auto;

  height: 58px;

  outline: none;
}

.tab__input {
  position: absolute;

  overflow: hidden;
  clip: rect(0 0 0 0);

  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;

  border: 0;
}
.tab__input:checked + .tab__label .tab__label--overlay {
  background: rgba(19, 0, 128, 0.363);
}

.tab__label {
  position: relative;

  height: 100%;

  cursor: pointer;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;

  font-size: 13px;
  font-weight: 600;
  font-style: normal;
  line-height: 42px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.tab__labelText {
  z-index: 2;
}

.tab__label--overlay {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  transform: skewX(-20deg);
}
</style>