@import (reference) "~ui/styles/variables";
@import (reference) "~ui/styles/mixins";

.sidebar-container {
  padding-left: 0px !important;
  padding-right: 0px !important;
  background-color: @sidebar-bg;
  border-right: 1px solid @sidebar-border;
  border-bottom: 1px solid @sidebar-border;

  .sidebar-well {
    background-color: darken(@sidebar-bg, 5%);
  }

  .sidebar-list {
    ul {
      list-style: none;
      margin-bottom: 0px;
    }

    &-header {
      padding-left: 10px;
      padding-right: 10px;
      color: @sidebar-header-color;
      border: 1px solid rgba(0, 0, 0, 0);
    }

    .sidebar-item {
      border-top: 1px solid @sidebar-border;
      font-size: @sidebar-item-font-size;

      a {
        color: @text-color;

        &:hover {
          color: @text-color;
          text-decoration: none;
        }
      }

      &-title,
      &-text,
      &-button {
        margin: 0;
        padding: 5px 10px;
        text-align: center;
        width: 100%;
        border: none;
        border-radius: 0;
      }

      &-title {
        text-align: left;
        white-space: nowrap;
        .ellipsis();

        &.full-title {
          white-space: normal;
        }

        &:hover,
        &:hover .text-muted {
          color: @sidebar-hover-color;
          background-color: @sidebar-hover-bg;
        }
      }

      &-text {
        background: white;
      }

      &-button {
        font-size: inherit;

        &[disabled] {
          opacity: 0.65;
          cursor: default;
        }

        &.primary {
          background-color: @btn-primary-bg;
          color: @btn-primary-color
        }

        &.info {
          background-color: @btn-info-bg;
          color: @btn-info-color
        }

        &.success {
          background-color: @btn-success-bg;
          color: @btn-success-color
        }

        &.warning {
          background-color: @btn-warning-bg;
          color: @btn-warning-color
        }

        &.danger {
          background-color: @btn-danger-bg;
          color: @btn-danger-color
        }

        &.default {
          .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
        }
      }

      .active {
        background-color: @sidebar-active-bg !important;
        color: @sidebar-active-color;

        &:hover,
        &:hover .text-muted {
          color: @sidebar-active-hover-color;
          background-color: @sidebar-active-hover-bg;
        }
      }
    }
  }

  .index-pattern {
    background-color: @sidebar-active-bg;
    font-weight: bold;
    padding: 5px 10px;
    color: @sidebar-active-color;
    display: flex;
    justify-content: space-between;

    > * {
      flex: 0 1 auto;
    }
  }

  .index-pattern-selection .sidebar-item-title {
    background-color: white;
  }
}