$block = ".kui-menu-bar";

{$block} {
  width: 190px;
  background: $c-white-base;

  > ul {
    width: 100%;
  }

  .button {
    justify-content: flex-start;
    padding: 12px;
    width: 100%;
    border: 0;
    border-radius: 0;
    background: none;
    color: $c-gray-darker;

    > span {
      font-size: $font-size-large;
    }

    svg {
      margin-right: 8px;
      fill: $c-gray-darker;
    }

    &:hover {
      background: $c-gray-lighter;
    }

    &.active {
      background: $c-gray-light;
    }
  }

  &__gray {
    background: $c-gray-lighter;
  }

  &__horizontal {
    width: 100%;

    li {
      flex: 1;
    }

    .button {
      justify-content: center;
      padding: 12px;
      border-bottom: 2px solid transparent;
      color: $c-gray-base;

      > span {
        white-space: nowrap;
        font-size: 16px;
      }

      &:focus {
        outline: 0;
      }

      svg {
        fill: $c-gray-base;
      }

      &.active {
        border-color: $c-brand-light;
        background: transparent;
        color: $c-brand-light;

        svg {
          fill: $c-brand-light;
        }
      }
    }
  }
}