@import '../../styles/utils/mixins';
@import '../../styles/utils/variables';

:host {
  display: block;
  height: 100%;
}

.tabs {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  background: $bn-blue2;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
  z-index: 9;
}

a.tab {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 12px 0;
  transition: color 0.26s ease;
  font: 12px/16px $open-sans;

  @include screen(lg) {
    padding: 2px 0 6px;
  }

  &:hover {
    color: $bn-blue-light3;
  }

  &.active {
    font-weight: bold;
    color: $bn-blue-light3;
    pointer-events: none;
  }
}

.bar {
  display: inline-block;
  background: $bn-blue-light3;
  // width: 50%;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: left 0.26s ease-in-out, width 0.26s ease-in-out, background 0.26s ease-in-out;
}

.tab-view__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: calc(100% - 40px);
  z-index: 8;

  @include screen(lg) {
    height: calc(100% - 30px);
  }

  ::ng-deep {
    .ps-content {
      padding: 5px 0;
    }

    .ps.ps--scrolling-y > .ps__rail-y,
    .ps__rail-y:focus,
    .ps__rail-y:hover {
      background: none;
    }
  }

}

// Card Theme
:host.card {

  .tabs {
    display: block;
    padding: 0 17px;
    box-shadow: none;
    position: relative;
  }

  .tab {
    width: auto;
    text-transform: uppercase;
    padding: 11px 0;
    line-height: 18px;

    & + .tab {
      margin-left: 30px;
      position: relative;

      &:not(.hidden-left-line)::before {
        content: '|';
        position: absolute;
        left: -1.5em;
        color: white;
        font-weight: normal;
        margin-top: -1px;
      }
    }
  }

  .bar {
    bottom: 7px;
  }

  .tab-view__body {
    background: $bn-blue3;
    height: calc(100% - 40px);
  }

  .noTabPointer {
    cursor: default;
  }
}
