@import '../constants/dimensions';

.titlebar {
  -webkit-user-select: none;
  -webkit-app-region: drag;
  flex-grow: 0;
  flex-shrink: 0;
  width: 100%;

  display: flex;
  flex-direction: row;

  height: var(--win32-title-bar-height);
  background-color: var(--color-contrast-bg);
  border-bottom: 1px solid var(--color-contrast-bg);

  .resize-handle {
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-app-region: no-drag;

    &.top {
      width: 100%;
      height: 3px;
    }

    &.left {
      width: 3px;
      height: var(--win32-title-bar-height);
    }
  }

  .window-controls {
    flex-grow: 0;
    flex-shrink: 0;
    margin-left: auto;
  }
  .window-title {
    line-height: var(--win32-title-bar-height);
    font-size: @font-size-md;
    padding-left: @padding-xs;
    padding-right: @padding-xxs;
  }

  &.just-controls {
    background: none;
    border-bottom: 0 solid transparent;

    .window-controls {
      height: var(--win32-title-bar-height);
    }
  }

  &.darwin {
    direction: rtl;
    height: var(--darwin-title-bar-height);

    &.just-controls {
      .window-controls {
        height: var(--darwin-title-bar-height);
        line-height: var(--darwin-title-bar-height);
      }
    }
    .window-title {
      line-height: var(--darwin-title-bar-height);
      padding-left: @padding-xxs;
      padding-right: @padding-xs;
    }
    .resize-handle {
      &.left {
        height: var(--darwin-title-bar-height);
      }
    }
  }

  &.win32 {
    height: var(--win32-title-bar-height);

    .app-icon {
      color: var(--toolbar-button-secondary-color);
      margin: 0 var(--spacing);
      align-self: center;
    }
  }

  a, .no-outline {
    outline: none;
  }
}