/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
@import "~@bentley/ui-core/lib/ui-core/style/themecolors";
@import "~@bentley/ui-core/lib/ui-core/tabs/horizontal";

.uifw-category-model-horizontal-tabs {
  @include uicore-tabs-horizontal;

  > li {
    width: 50%;
  }

  > li > a {
    border: none;
    border-top: 1px solid #ccc;
    color: $buic-text-color;
    background-color: $buic-background-tab-inactive;
    text-align: center;
  }

  li:first-child > a {
    border-top: 1px solid #ccc;
    border-bottom: none;
  }

  li:last-child > a {
    border-top: 1px solid #ccc;
    border-bottom: none;
  }

  > li.active > a {
    color: $buic-foreground-primary;
    background-color: $buic-background-tab-active;
    border-bottom: none;
  }
}

.uifw-widget-picker {
  background-color: $buic-background-widget;
  margin: 0 5px;
  position: relative;
  overflow: hidden;
  height: 100%;
  position: relative;

  .core-ls {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  > .widget-groups {
    height: 100%;
    transition: transform .2s linear;
    opacity: 1;

    &.hide {
      opacity: 0;
      transform: translateX(-100%);
    }

    > .searchbox {
      width: 100%;
      padding-top: 10px;
      padding-bottom: 8px;
    }

    > .widget-picker-group {
      width: 100%;
      padding: 10px 5px;
      display: flex;
      align-items: center;
      font-size: 16px;
      color: $buic-text-color;
      border-bottom: 1px solid #ccc;
      cursor: pointer;

      &:hover {
        color: $buic-foreground-primary;

        > .icon {
          color: $buic-foreground-primary;
        }
      }

      > .group-count {
        font-size: 12px;
        height: 1em;
        line-height: 1em;
        border-radius: 1em;
        padding: .4em .6em;
        background: #ccc;
        margin-left: auto;
        margin-right: 5px;
        color: $buic-text-color;
      }

      > .icon {
        font-size: 14px;
      }
    }
  }

  .uifw-modelselector {
    width: 100%;
    height: calc(100% - 44px);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: .2s linear;
    background-color: $buic-background-widget;

    &.show {
      opacity: 1;
      transform: translateX(0%);
    }

    > .modelselector-toolbar {
      background-color: $buic-background-widget;
      display: flex;
      justify-content: space-between;
      margin: 10px 0;

      .components-filtering-input.filtering-input-preload-images {
        margin: 0 10px 0 0;
        flex: 1;
      }

      .option-group {
        margin: 10px 0 10px auto;

        .icon {
          &:focus {
            outline: none;
          }
        }

        .icon-search {
          margin-left: auto;
          margin-right: 6px;
          font-size: 14px;
        }

        .icon-close {
          margin-left: auto;
          margin-right: 6px;
          font-size: 14px;
        }

        .options {
          margin: 0 15px;
        }
      }

      .modelselector-buttons {
        margin: 15px 5px;

        > .icon {
          margin-right: 5px;
          padding: 7px;
          border: 1px solid #ccc;
          font-size: 18px;
          color: $buic-icon-color;
          cursor: pointer;
          -webkit-transition: color .2s ease;
          -moz-transition: color .2s ease;
          -o-transition: color .2s ease;
          transition: color .2s ease;

          &:hover {
          color: $buic-foreground-activehover;
          }
        }
      }
    }

    .modelselector-content {
      height: 100%;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      overflow: hidden;
      background: white;

      .core-ls {
        position: relative;

        .core-spinner {
          position: absolute;
        }
      }

      .components-tree-errormessage {
        text-align: center;
      }
    }
  }
}