// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

@import "refactor/common-refactor.scss";

.title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: $s-32;
  width: 100%;
  min-height: $s-32;
  margin: $s-4 0;
  background-color: var(--title-background-color);
  .title,
  .title-only {
    @include tabTitleTipography;
    display: flex;
    align-items: center;
    flex-grow: 1;
    height: 100%;
    min-height: $s-32;
    color: var(--title-foreground-color);
  }
  .title-only {
    margin-left: $s-8;
  }

  .title-wrapper {
    display: flex;
    align-items: center;
    flex-grow: 1;
    padding: 0;
    color: var(--title-foreground-color);
    stroke: var(--title-foreground-color);
    .toggle-btn {
      @include buttonStyle;
      display: flex;
      align-items: center;
      flex-grow: 1;
      padding: 0;
      color: var(--title-foreground-color);
      stroke: var(--title-foreground-color);
      .collapsabled-icon {
        @include flexCenter;
        height: $s-24;
        border-radius: $br-8;
        svg {
          @extend .button-icon-small;
          transform: rotate(90deg);
          stroke: var(--icon-foreground);
        }
        &.rotated svg {
          transform: rotate(0deg);
        }
      }
      &:hover {
        color: var(--title-foreground-color-hover);
        stroke: var(--title-foreground-color-hover);
        .title {
          color: var(--title-foreground-color-hover);
          stroke: var(--title-foreground-color-hover);
        }
        .collapsabled-icon svg {
          stroke: var(--title-foreground-color-hover);
        }
      }
    }
    .collapsabled-icon {
      @include buttonStyle;
      @include flexCenter;
      height: $s-24;
      border-radius: $br-8;
      svg {
        @extend .button-icon-small;
        transform: rotate(90deg);
        stroke: var(--icon-foreground);
      }
      &.rotated svg {
        transform: rotate(0deg);
      }
    }
    &:hover {
      color: var(--title-foreground-color-hover);
      stroke: var(--title-foreground-color-hover);
      .title {
        stroke: var(--title-foreground-color-hover);
      }
      .collapsabled-icon svg {
        stroke: var(--title-foreground-color-hover);
      }
    }
  }

  .title-button {
    @extend .button-tertiary;
    height: $s-32;
    width: calc($s-24 + $s-4);
    padding: 0;
    border-radius: $br-8;
    svg {
      @extend .button-icon;
      stroke: var(--icon-foreground);
    }
  }
}
