/**
* Styles for React-based faceted search UI for studies
*/


@import './_colors.scss';

.study-keyword-search, .gene-keyword-search {
  box-sizing: border-box;
  display: inline-block;
  height: 38px;
  width: 340px;
  white-space: nowrap;

  input.form-control, .gene-keyword-search-input > div:first-of-type {
    background-color: white;
    border: 1px solid $action-color;
    border-radius: 15px 0px 0px 15px;
    height: 100%;
    width:100%;
    color: $action-color;
    font-weight: 500;
    height: 38px;
  }

  .gene-keyword-search-input.disabled > div:first-of-type {
    background-color: #eee;
    border-color: #ccc;
  }

  .input.form-control {
    line-height: 100%;
    padding: 0 30px 0 16px;
    width: 90%;
  }

  button {
    width: 40px;
    height: 38px;
    background-color: $action-color;
    border: none;
    border-radius: 0px 15px 15px  0px;
    &:hover {
      background-color: lighten($action-color, 10%);
    }
    svg {
      color: white;
    }
  }

  button.keyword-clear {
    position: absolute;
    top: 1px;
    z-index: 200;
    background: none;
    width: 1.5em;
    right: 10px;
    svg {
      color: #aaa;
    }
  }
}

.gene-study-keyword-search.gene-keyword-search {
	button {
    border-radius: 15px 0px 0px  15px;
  }
  .gene-keyword-search-input > div {
    border-radius: 0px 15px 15px 0px;
  }
  .btn-icon {
		z-index: 10;
  	border-radius: 0 0 0 0;
  }
}

.gene-keyword-search .input-group {
  display: flex;
  width: 600px;
}

.gene-keyword-search-input {
  flex: 1;
}

.study-explore .gene-keyword-search {
	width: 100%;
	.input-group {
		width: 100%;
	}
}
