/*!
 * @author: tvc12 - Thien Vi
 * @created: 4/19/21, 1:46 PM
 */

@import 'node_modules/bootstrap/scss/functions';
@import 'node_modules/bootstrap/scss/variables';
@import 'node_modules/bootstrap/scss/mixins/breakpoints';
@import '~@/themes/scss/mixin.scss';

.header-bar {
  align-items: center;
  display: flex;
  height: 40px;
  flex-direction: row;
  margin-bottom: 12px;

  .source-item {
    height: 100%;
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
    background: var(--secondary-2);

    &.di-active {
      background: var(--white);

      i {
        color: var(--accent);
      }

      label {
        color: var(--accent);
      }
    }

    label {
      @include medium-text();
      font-size: 12px;
      font-weight: var(--builder-font-weight);
      margin: 0 0 0 2px;
    }
  }

  img {
    margin-left: auto;
  }
}

.database-listing {
  padding: 0 12px 12px 12px;
  height: 80%;
  flex-grow: 1;
  flex-shrink: 1;

  .database-selector {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    .selector {
      margin: unset;
      flex-shrink: 1;
      flex-grow: 1;
      ::v-deep {
        .relative > span > button {
          background: unset;
          color: var(--text-color);
          height: 32px;
          background: var(--background-de-active);
          border: solid #d6d6d6 1px !important;
        }
      }
    }
  }

  .schema-listing {
    //margin-top: 24px;
    @include media-breakpoint-down(lg) {
    }

    .nav-scroll {
      //margin-bottom: 24px;

      ::v-deep {
        .nav {
          > div {
            width: 100%;
          }

          .sl-vue-tree-nodes-list {
            > .sl-vue-tree-node {
              > .sl-vue-tree-node-is-folder {
                padding: 5px 0;
              }
            }
          }
        }
      }
    }
  }
}

.search-input {
  background: var(--input-background-color);
  padding-left: 10px;
  height: 36px;
  width: 100%;
  padding-right: 30px;

  &::placeholder {
    color: var(--text-color);
    opacity: var(--normal-opacity);
  }
}

//.search-btn {
//  padding: 7.5px;
//}

.close-search-btn {
  right: 15px;
  width: 35px;
  height: 35px;
}
