@define-color topbar_bg #333;

/* Used for rows so we can spare ourselves an entire GtkSeparator */
.border-bottom {
  border-bottom: solid 1px alpha(grey, 0.3);
}

avatar>container {
  border: 1px solid transparent;
}
avatar>container.avatar-round {
  border: 1px solid grey;
  border-radius: 50%;
}

.account-button {
  padding: 2px 4px;
}

.topbar button image {
  -gtk-icon-shadow: none;
  color: #ddd;
}

.topbar button {
  border: none;
  box-shadow: none;
  background-image: none;
  border-radius: 0px;
  background-color: @topbar_bg;
  outline-color: #999;
  margin: 0px;
}

.topbar button:hover {
  background-color: shade(@topbar_bg, 1.3);
}

.topbar button:checked {
  background-color: shade(@topbar_bg, 1.5);
}

.topbar button .badge {
  background-color: shade(blue, 1.4);
  background-image: none;
  text-shadow: 0px 1px 1px #FFF;
  border-radius: 20px;
  border: 1px solid white;
  padding: 3px 2px;
}

.topbar button .badge:backdrop {
  background-color: grey;
}

mediabutton {
  background: none;
  border-radius: 0px;
  padding: 0px;
  opacity: 0.9;
  box-shadow: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-top: 2px solid transparent;
}

mediabutton:hover {
  opacity: 1.0;
  box-shadow: none;
  border-top: 2px solid grey;
  border-bottom: 2px solid grey;
}

.image-success {
  box-shadow: none;
  background-image: none;
  border-radius: 0px;
  border: none;
  background-color: transparent;

  color: white;
  -gtk-icon-source: -gtk-icontheme("object-select-symbolic");
}

.image-error {
  box-shadow: none;
  background-image: none;
  border-radius: 0px;
  border: none;
  background-color: transparent;

  color: white;
  -gtk-icon-source: -gtk-icontheme("dialog-error-symbolic");
}


.retweet-button:hover,
.retweet-button:checked {
  color: shade(green, 1.1);
}

.favorite-button:hover,
.favorite-button:checked {
  color: red;
}

/* Don't target :hover:active here */
.favorite-button:checked:not(:hover),
.retweet-button:checked:not(:hover) {
  background-image: none;
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

.reply-button:hover {
  color: blue;
}

.favorite-button:backdrop,
.retweet-button:backdrop {
  background-color: transparent;
}

button.user-name {
  font-weight: bold;
  background-image: none;
  background-color: transparent;
  border:none;
  text-shadow: none;
  padding: 0;
  box-shadow: none;
  border-radius: 0px;
  border-bottom: 1px solid transparent;
  min-height: 0px;
  margin-bottom: -1px;
  outline-offset: 0;
}

button.user-name:hover {
  border-bottom: 1px solid currentColor;
}

button.user-name:active {
  color: inherit;
  background-color: alpha(currentColor, 0.4);
}

button.user-name:backdrop {
  background-color: transparent;
}

.pixbuf-button {
  padding: 0px;
  background-image: none;
  background-color: transparent;
  border: none;
  border-radius: 0px;
  box-shadow: none;
  transition: box-shadow 0.2s ease-in-out;
}

.pixbuf-button-round {
  border: 1px solid grey;
  border-radius: 48px;
}

.pixbuf-button:hover {
  border: 1px solid #4a90d9;
}

.pixbuf-button:active {
  box-shadow: inset 0px 0px 3px alpha(black, 0.95);
}
.pixbuf-button:backdrop {
  background-color: transparent;
  background-image: none;
}

replyindicator>revealer>button {
  border-radius: 0px;
  margin: 0px;
  box-shadow: none;
  background-image: none;
  background-color: alpha(grey, 0.3);
  border: none;
  min-height: 0px;
  text-shadow: none;
  font-size: 80%;
  -gtk-icon-shadow: none;
  padding-top: 2px;
  padding-bottom: 2px;
}

replyindicator>revealer>button>box>label {
  margin-left: 2em;
  margin-right: 2em;
}

.profile-button {
  border-radius: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-top-width: 0px;
  border-bottom: 2px solid transparent;
  box-shadow: none;
}

.profile-button:checked {
  border: none;
  box-shadow: none;
  background-image: none;
  background-color: transparent;
  color: inherit;
  border-bottom: 2px solid #4a90d9;
}

.profile-button:hover {
  background-image: none;
  background-color: alpha(white, 0.3);
  border-bottom: 2px solid #aaa;
}

.profile-button:active {
  color: inherit;
  border-bottom: 2px solid grey;
}

.quote {
  border-left: 3px solid alpha(currentColor, 0.4);
}

.close-button {
  padding: 3px;
  border-radius: 50%;
  min-height: 0px;
  min-width: 0px;
  box-shadow: none;
}

.avatar:disabled,
mediabutton:disabled {
  opacity: 0.4;
}
/* Override the earlier rule to read-only
 * inline media are still full-opacity */
.read-only mediabutton:disabled {
  opacity: 1.0;
}

progressbar.horizontal.embedded-progress,
progressbar.horizontal.embedded-progress>trough,
progressbar.horizontal.embedded-progress>trough>progress {
  margin: 0px;
  border-radius: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
}

.fav-image-box {
  padding: 6px;
}

/* GtkFlowBox doesn't handle the hover state of its children so... */
.fav-image-item:hover {
  background-color: alpha(black, 0.1);
}

.fav-image-item:active {
  background-color: alpha(black, 0.3);
}

.invisible-links link:link {
  color:inherit;
}

.tweet-info-grid {
  padding: 1em;
}


/* Use this if box shadows don't work out */
row.tweet {
  /*border-bottom: 1px solid alpha(grey, 0.3);*/
  /*padding: 1em;*/
}

list.tweets {
  background-color: #eee;
}

row.tweet {
  background-color: #fff;
  padding: 1em;
  margin: 0 1em 1em 1em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12),
              0 1px 2px rgba(0,0,0,0.24);
}

row.tweet:backdrop {
  box-shadow: none;
}

row.tweet:active {
  box-shadow: inset 0px 1px 2px #888;
}

row.tweet:first-child {
  margin-top: 1em;
}

row.tweet avatar {
  margin-right: 1em;
}

row.tweet>.rt-icon {
  margin-right: 0.5em;
}

row.tweet>.rt-icon,
row.tweet>.rt-label {
  margin-top: 0.5em;
}

row.tweet>multimedia {
  margin-top: 0.5em;
}

row.tweet button.user-name {
  margin-right: 0.5em;
}

row.tweet>label.text {
  margin-top: 0.5em;
}

row.tweet label.time-delta {
  margin-left: 0.5em;
}

row.tweet>box.quote {
 padding-left: 0.5em;
 margin-top: 1em;
}

row.tweet>box.quote>quotetweet>box.header {
  margin-bottom: 0.5em;
}

row.tweet>box.quote>multimedia {
  margin-top: 0.5em;
}

textview.view.fancy {
  border: 1px solid alpha(grey, 0.7);
  border-radius: 2px;
}

textview.view.fancy textview {
  padding: 1em;
}

textview.view.fancy>box {
  border-spacing: 0.2em;
}

textview.view.fancy button {
  border: none;
  border-radius: 0px;
  background: none;
  box-shadow: none;
  -gtk-icon-shadow: none;
}

textview.view.fancy button:hover {
  background-color: alpha(grey, 0.7);
}

textview.view.fancy>scrolledwindow.completion {
  border-top: 1px solid alpha(grey, 0.7);
}

textview>.extra {
  min-height: 32px;
}

box.col-spacing {
  border-spacing: 1em;
}

row.dm {
  border-bottom: solid 1px alpha(grey, 0.3);
  padding: 0.5em;
}

row.dm avatar {
  margin-right: 0.5em;
}

row.dm button.user-name {
  margin-right: 0.5em;
}

row.dm label.time-delta {
  margin-left: 0.5em;
}

row.dm label.text {
  margin-top: 0.5em;
}
