@import "_normalize.scss";
@import "_variables.scss";

.vss {
  * {
    font-size: $font-size-base;
  }

  .vss-span {
    font-size: $font-size-base + 0.4rem;
    color: $gray;
  }

  .vss-list {
    .vss-inner-list {
      box-shadow: 0px 0px 10px $gray;
      border-radius: $border-radius-base;

      .vss-list-search {
        border: none;
        padding: 12px 14px;
        border-bottom: 2px solid adjust-color($gray, $lightness: 7%);
        border-top-left-radius: $border-radius-base;
        border-top-right-radius: $border-radius-base;
        outline: none;

        &:focus {
          border-color: $selected-color;
        }
      }

      .vss-list-ul {
        padding: 8px 10px 10px 10px;

        li {
          span {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: $border-radius-base;
            color: $default-text-color;
            padding: 5px 12px;
            margin-top: 2px;

            .vss-list-badge {
              font-size: $font-size-base - 0.4;
              color: $white;
              background-color: $badge-background;
              padding: 2px 4px 0px 4px;
              border-radius: 20px;
              min-width: 14px;
              height: 14px;
              font-weight: bold;
            }
          }

          &.active:not(.is-parent) > span {
            background-color: $default-item-background-selected;
            color: $default-item-color-selected;
            border-color: transparent;
          }

          &.is-disabled:not(.is-parent) > span {
            background-color: adjust-color($gray, $lightness: -5%);
            color: $default-item-color-selected;
            color: $default-text-color;
            cursor: default;
            border-color: transparent;
          }

          &.is-disabled.active:not(.is-parent) > span {
            background-color: adjust-color($default-item-background-selected, $lightness: 20%);
            color: $default-item-color-selected;
          }

          &:not(.is-parent) > span {
            cursor: pointer;
            background-color: $default-item-background;
            border: 1px solid adjust-color($default-item-background, $lightness: -2%);
          }

          &.no-results > span,
          &.no-selection > span {
            cursor: default;
            background-color: $default-item-background;
            border-color: transparent;
          }
        }

        // > li:not(.is-parent) > span {
        //
        // }

        > li.is-parent > span {
          font-weight: bold;
          padding-left: 0px;
        }
      }

      .vss-footer {
        align-items: flex-end;
        display: flex;
        flex: 1 0 auto;

        .vss-footer-bg {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0px 12px;
          height: 2rem;
          width: 100%;
          background-color: $default-footer-background;
          border-bottom-left-radius: $border-radius-base;
          border-bottom-right-radius: $border-radius-base;

          * {
            color: $default-footer-text-color;
            font-size: $font-size-base - 0.2;
          }

          > div {
            display: flex;

            .vss-footer-separator {
              margin: 0px 6px;
            }
          }

          > span {
            font-size: $font-size-base - 0.3;
            font-weight: bold;
            color: $default-footer-text-color;
            background-color: adjust-color($default-footer-background, $lightness: 15%);
            padding: 1px 6px 0px 6px;
            border-radius: 20px;
            min-width: 14px;
            height: 14px;
          }
        }
      }
    }

    .vss-total {
      font-size: $font-size-base - 0.2rem;
    }
  }
}