@import url('./MetadataView.css');
@import url('./DetailView.css');
@import url('./Icons.css');

.xavier-sidepanel {
  min-width: 400px;
}

.xavier-sidepanel-react {
  background: var(--jp-layout-color1);
  color: var(--jp-ui-font-color1);

  /* This is needed so that all font sizing of children done in ems is
   * relative to this base size */
  font-size: var(--jp-ui-font-size1);

  overflow: hidden;
  min-width: 450px;
  width: 450px;
  padding: 10px;
}

.xavier-sidepanel-fullview {
  display: block;
  width: 100%;
  height: 100%;
}

.xavier-sidepanel-view-title {
  display: block;
  width: 100%;
  height: 20px;
  margin-top: 5px;
  margin-bottom: 5px;
}

/* sti == sidepanel-title-icon */
.xavier-sti-wrapper {
  display: inline-block;
  width: var(--xavier-icon-width);
  height: 100%;
  vertical-align: top;
  margin: 0 5px;
}

/* st == sidepanel-title */
.xavier-st-text {
  display: inline-block;
  width: calc(100% - var(--xavier-icon-width) - 10px - 102px); /* margin of xavier-sti-wrapper and border of xavier-st-btn */
  height: 100%;
  vertical-align: top;
  color: #777;
  font-weight: 700;
  font-size: 15px;
  overflow: hidden;
}

.xavier-st-btn {
  display: inline-block;
  width: 100px;
  height: 100%;
  vertical-align: top;
  line-height: calc(100% + 10px); /* Maybe hard code */
  text-align: center;
  cursor: pointer;
  border-width: 1px;
  border-radius: 1px;
  border-style: solid;
}

.xavier-st-btn:hover {
  color: #1890ff;
}