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

@import "./theme.css";
@import "./sizes.css";

.tabs {
  box-shadow: var(--shadow-bottom);
}

.tabs::shadow #selectionBar {
  background-color: var(--color-secondary-800);
  height: 3px;
}

.tab {
  background-color: var(--color-white);
  color: var(--color-text-primary);
}

.tab::shadow #ink {
  color: var(--color-bright);
}

.tab-content {
  padding: var(--size-space-xsmall);
}

paper-spinner {
  margin: var(--size-space-xsmall);
}

::shadow paper-input-decorator {
  padding: 0;
}

::shadow paper-input-decorator /deep/ #focusedUnderline {
  background-color: var(--color-bright);
}

paper-progress {
  width: 100%;
  height: 4px;
}

/*
 * With delayed class, we only make the progressbar visible after 500ms
 * This normally creates better UX since if everything loads within a short time
 * there is no flash of a short-lived loading indicator anymore.
 */
paper-progress.delayed {
  -webkit-animation:delayed-progressbar 0.5s;
}
@-webkit-keyframes delayed-progressbar{
  0%{visibility:hidden;}
  99%{visibility:hidden;}
  100%{visibility:visible;}
}

paper-progress::shadow #activeProgress {
  background-color: var(--color-bright);
}

paper-progress::shadow #progressContainer {
  background-color: transparent;
}

paper-button {
  background-color: var(--color-button-primary);
  color: var(--color-button-primary-text);
  margin: var(--size-space-xsmall);
}

paper-button.secondary {
  background-color: var(--color-button-secondary);
  color: var(--color-button-secondary-text);
}

/*
 * The paper-button looks better with reduced padding.
 * Polymer defaults to 0.70em for padding-top and padding-bottom.
 */
paper-button::shadow .button-content {
  padding-top: 0.35em;
  padding-bottom: 0.35em;
}

paper-button > core-icon {
  margin-right: var(--size-space-xsmall);
}

::shadow /deep/ paper-spinner::shadow .circle,
paper-spinner::shadow .circle {
  border-color: var(--color-bright);
  border-width: 2px;
}

.empty {
  width: 100%;
  padding: 1em;
  text-align: center;
  color: var(--color-text-secondary);
}

.grayed-out, tree-node.grayed-out::shadow .item {
  opacity: 0.5;
}

/*
 * Applies a tiny margin to the left of the element.
 */
.margin-left-xxsmall {
  margin-left: var(--size-space-xxsmall);
}

/*
 * Delay the appearance of core tooltips to reduce accidental 'on-hover' spam.
 */
core-tooltip::shadow .core-tooltip {
  transition: visibility 0s;
}
core-tooltip[focused]::shadow .core-tooltip,
core-tooltip:hover:not([disabled])::shadow .core-tooltip {
  transition-delay: 0.5s;
}