/* Copyright 2014 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

#video-player > .header {
  -webkit-app-region: drag;
  background: rgba(30, 30, 30, 0.8);
  border-bottom: 1px solid rgba(50, 50, 50, 0.8);
  display: flex;
  flex-direction: row;
  height: 45px;
  opacity: 1;
  pointer-events: auto;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 200;
}

#video-player > .header > #title {
  color: white;
  flex-grow: 1;
  font-size: 16px;
  line-height: 45px;
  overflow: hidden;
  padding-left: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#video-player > .header > button,
#video-player > .header > button[disabled] {
  align-content: center;
  background-color: rgba(0, 0, 0, 0);
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  box-shadow: none;
  color: white;
  cursor: pointer;
  padding: 1px;  /* Instead of a border. */
  position: relative;
  z-index: 10;
}

#video-player > .header > button {
  height: 40px;
  margin: 6px 0;
  min-width: 40px;  /* Reset. */
  width: 40px;
}

#video-player > .header > button:hover {
  background-color: rgba(240, 240, 240, 1);
}

#video-player > .header > button:active,
#video-player > .header > button[pressed],
#video-player > .header > button[pressed]:hover {
  color: black;
}

#video-player > .header > button {
  -webkit-app-region: no-drag;
  -webkit-margin-end: 10px;
  cursor: default;
  height: 32px;
  min-width: 32px;
  width: 32px;
}

#video-player > .header > button.minimize-button {
  background-image: -webkit-image-set(
      url(chrome://resources/images/apps/topbar_button_minimize.png) 1x,
      url(chrome://resources/images/2x/apps/topbar_button_minimize.png) 2x);
}

#video-player > .header > button.maximize-button {
  background-image: -webkit-image-set(
      url(chrome://resources/images/apps/topbar_button_maximize.png) 1x,
      url(chrome://resources/images/2x/apps/topbar_button_maximize.png) 2x);
}

#video-player > .header > button.close-button {
  background-image: -webkit-image-set(
      url(chrome://resources/images/apps/topbar_button_close.png) 1x,
      url(chrome://resources/images/2x/apps/topbar_button_close.png) 2x);
}