@import '../../scss/variables';

:host /deep/ {
  display: flex;
  background: $sky-color-white;
  flex-direction: row;

  .sky-contrib-vertical-tabbar {
    display: flex;
    min-height: 300px;
    width: 100%;
  }

  .sky-contrib-vertical-tabbar-menu {
    border-right: 1px solid $sky-border-color-neutral-light;
    flex-basis: 25%;
    font-family: $sky-font-family;
    list-style: none inside;
    margin: 0;
    min-width: 150px;
    overflow: hidden;
    padding: 0;

    li {
      margin: 5px 0 0 0;

      a {
        border-left: 4px solid rgba(0, 0, 0, 0);
        color: $sky-text-color-default;
        cursor: pointer;
        display: block;
        margin: 0;
        overflow: hidden;
        padding: 9px 15px;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-decoration: none;

        &:hover {
          background-color: $sky-background-color-neutral-light;
        }

        &.active {
          background-color: $sky-background-color-neutral-light;
          border-left: $sky-nav-selected-border-width solid $sky-highlight-color-info;
          cursor: default;
        }

        &.invalid,
        > span.required {
          color: $sky-form-error-color;
        }

        &[disabled="true"] {
          background-color: $sky-color-gray-01;
          border-left: 4px solid rgba(0, 0, 0, 0);
          color: $sky-color-gray-20;
          cursor: default;
        }
      }
    }
  }

  .sky-contrib-vertical-tabbar-content {
    flex-grow: 1;
    padding: 10px 15px;
  }
}