@use './colors' as c;
@use './transitions' as t;

$unit: 24px;

.multitrack-header,
.multitrack-header-focus,
.multitrack-header-squeazed {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: $unit;
  margin-top: calc($unit / 6);
  margin-bottom: calc($unit / 6);
  color: c.$gray;
  font-size: calc($unit / 2);
  line-height: $unit;
  vertical-align: middle;
  border: 0;
  border-radius: calc($unit / 8);
  background: c.$gray-lighter;
  transition: height t.$fast t.$ease, margin t.$fast t.$ease;
}

.multitrack-header-dark {
  background: c.$gray-darkest;
}

.multitrack-header-focus {
  height: $unit + calc($unit / 3);
  margin-top: 0;
  margin-bottom: 0;
}

.multitrack-header-id {
  padding-left: 3px;

  &:before {
    content: 'ID:';
    font-weight: bold;
    padding-right: 5px;
  }
}

.multitrack-header-left {
  display: flex;
  flex-grow: 1;
}

.multitrack-header-grabber,
.multitrack-header-grabber-squeazed {
  display: flex;
  align-items: center;
  justify-content: center;
  width: $unit;
  height: 100%;
  cursor: move;
  border-radius: calc($unit / 8) 0 0 calc($unit / 8);
  transition: background t.$fast t.$ease;

  &:hover {
    background: c.$gray;

    div {
      background: c.$white;
    }
  }

  div {
    width: 1px;
    height: 50%;
    margin: 1px;
    background: c.$gray;
    transition: background t.$fast t.$ease;
  }
}

.multitrack-header-dark .multitrack-header-grabber {
  div {
    background: c.$gray-dark;
  }
}

.multitrack-header-grabber-squeazed {
  width: calc($unit / 1.25);
}

.multitrack-header-search {
  position: relative;
  flex-grow: 1;
  height: 100%;
  margin-right: calc($unit / 2);

  &:after {
    position: absolute;
    top: calc($unit / 8);
    bottom: calc($unit / 8);
    right: -(calc($unit / 2));
    display: block;
    content: '';
    width: 1px;
    margin: 0 calc($unit / 4);
    background: c.$gray-light;
  }
}

.multitrack-header-dark .multitrack-header-search {
  &:after {
    background: c.$gray-dark;
  }
}

.multitrack-header-nav-list,
// Only required because the stupid Bootstrap library overwrites the display
// property otherwise
.multitrack-header > nav {
  display: flex;
}

.multitrack-header-icon,
.multitrack-header-icon-squeazed {
  width: $unit;
  height: 100%;
  padding: calc($unit / 4);
  transition: background t.$fast t.$ease, color t.$fast t.$ease;

  g {
    stroke: c.$gray;
  }

  &:hover,
  &:active,
  &:focus {
    color: c.$white;
    background: c.$active;
    g {
      stroke: c.$white;
    }
  }

  &:last-child {
    border-radius: 0 calc($unit / 8) calc($unit / 8) 0;
  }
}

.mouse-tool-selection {
  color: white;
  border-radius: calc($unit / 8) 0 0 calc($unit / 8);
  background: c.$active;
}

.multitrack-header-icon-squeazed {
  width: calc($unit / 1.2);
  padding-left: calc($unit / 8);
  padding-right: calc($unit / 8);
}