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

:host /deep/ {
  ol {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-bottom: 10px;
    position: relative;

    &:after {
      clear: both;
      content: " ";
      display: table;
    }
  }

  li {
    float: left;
    color: $sky-text-color-default;
    background-color: $sky-border-color-neutral-light;
    border: 1px solid $sky-border-color-neutral-light;
    border-radius: 3px;
    padding: 5px 16px;
    line-height: 24px;

    max-width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 400;
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;

    &.active, &.active.disabled, &.active.visited.valid {
      background-color: $sky-background-color-info;
      border-color: $sky-background-color-info;
    }

    &.visited.valid {
      background-color: $sky-color-white;
    }

    &.active.valid + li.visited.disabled:not(.active) {
      pointer-events: auto;
      cursor: pointer;
    }

    &.disabled, &:not(.visited) {
      background-color: $sky-color-gray-05;
      color: $sky-color-gray-70;
      pointer-events: none;
      cursor: not-allowed;
    }
  }
}