@use "./vars";

$min-button-width: 24px;
$button-width: 34px;

.component-title-bar {
  align-items: center;
  background-color: vars.$title-bar-color;
  border-radius: vars.$border-radius-top-corners;
  container-name: titleBar;
  container-type: inline-size;
  flex-direction: row;
  height: vars.$title-bar-height;
  overflow: hidden;
  width: 100%;

  &.focusTile {
    background-color: vars.$title-bar-focus-color;

    .component-title-bar-button {
      &:hover {
        background-color: vars.$title-bar-color;
      }

      &:active {
        background-color: #d3f4ff;
      }
    }
  }

  &:hover, &:active {
    .header-right {
      visibility: visible;

      &.disabled {
        visibility: hidden;
      }
    }
  }

  .header-left, .header-right {
    .component-title-bar-button {
      align-items: center;
      background-color: transparent;
      border-radius: 0;
      display: flex;
      height: vars.$title-bar-height;
      justify-content: center;
      min-width: $min-button-width;
      padding: 0;
      width: $button-width;

      &:hover {
        background-color: #d3f4ff;
      }

      &:active {
        background-color: #eaf9ff;
      }
    }
  }

  .header-left {
    align-items: center;
    border-top-left-radius: 6px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: absolute;
  }

  .header-right {
    height: vars.$title-bar-height;
    flex-direction: row;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    visibility: hidden;
    fill: lightgray;
    border-top-right-radius: 6px;

    .component-minimize-button {
      background-color: transparent;
      border: none;
      padding: 0;
    }

    .component-close-button {
      border-top-right-radius: 4px;
    }
  }
}

.title-bar {
  color: #222;
  cursor: grab;
  font-size: 14px;
  touch-action: none;
  width: 100%;

  .title-text, .title-text-input {
    border-radius: vars.$border-radius-four-corners;
    cursor: text;
    display: flex;
    font-weight: 500;
    margin: auto;
    max-width: calc(100% - 10px);
    overflow: hidden;
    padding: 0 10px;
    text-align: center;
  }

  .title-text {
    border: 1px solid vars.$icon-fill-dark;
    white-space: nowrap;
    width: fit-content;

    span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
    }

    &:hover {
      background-color: vars.$title-bar-color;
    }
  }

  .title-text-input {
    outline: 2px solid vars.$focus-outline-color;
    outline-offset: 0;
    width: 100%;
  }

  .title-text-measure {
    height: 0;
    overflow: hidden;
    position: absolute;
    white-space: pre;
  }
}

// Ensure the buttons in `.header-right` don't extend beyond the title bar bounds
// when the tile is narrower than the default width of the two buttons.
@container titleBar (max-width: #{$button-width * 2}) {
  .header-right {
    .component-title-bar-button {
      width: $min-button-width !important;
    }
    .component-minimize-button {
      border-top-left-radius: 4px !important;
      margin-right: 2px !important;
    }
  }
}
