@import "src/style/modules";

$query-tab--height: $cf-form-sm-height;
$query-tab--padding: $cf-form-sm-padding;
$query-tav--font-size: $cf-form-sm-font;

$query-tab--default-bg: $g2-kevlar;
$query-tab--default-text: $g10-wolf;

$query-tab--hover-bg: $g3-castle;
$query-tab--hover-text: $g15-platinum;

$query-tab--active-bg: $g3-castle;
$query-tab--active-text: $g18-cloud;


.query-tab {
  background-color: $query-tab--default-bg;
  color: $query-tab--default-text;
  margin-right: $cf-border;
  height: $query-tab--height;
  border-radius: $cf-radius;
  display: inline-flex;
  flex: 0 1 auto;
  justify-content: space-between;
  align-items: center;
  font-weight: $cf-font-weight--medium;
  padding: 0 $query-tab--padding;
  font-size: $query-tav--font-size;
  user-select: none;
  transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;

  .query-tab--hide {
    display: none;
    font-size: 1.125em;
    margin-right: $cf-marg-a;
  }

  .query-tab--name {
    width: 40px;
    margin-right: $cf-marg-a;
  }

  &:hover {
    cursor: pointer;
    background-color: $query-tab--hover-bg;
    color: $query-tab--hover-text;
  }
}

.query-tab__active {
  flex: 0 0 auto;
  background: $g3-castle;
  color: $g16-pearl;
  
  .query-tab--hide {
    display: inline-flex;
  }
  
  .query-tab--name {
    width: auto;
  }
}

.query-tab--name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.query-tab--close,
.query-tab--hide {
  color: rgba($g15-platinum, 50%);
  transition: color 0.25s ease;

  &:hover {
    color: $g15-platinum;
  }
}

.query-tab__hidden {
  font-style: italic;
  opacity: 0.5;
}

.query-tab--timer {
  white-space: nowrap;
  flex: 1 1 auto;
  font-weight: $cf-font-weight--medium;
  margin-right: $cf-marg-b;
  transition: opacity 0.25s;
  opacity: 0;

  &.query-tab--timer__visible {
    opacity: 0.5;
  }
}
