/* gnu/linux styles */

html {
  background-color: transparent !important;
}

body {
  color: #333333;
  background: #dddddd;
  font-size: 12px;
  font-weight: normal;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
.dark body {
  background: #333333;
  color: #dddddd;
}

.dark a {
  color: Highlight;
}

.row.buttons {
  background: #00000010;
  margin: 0;
  padding: 1rem;
}

select {
  margin-top: 3px;
}

fieldset,
section {
  border-radius: 5px;
}

input[type="checkbox"],
input[type="radio"] {
  transform: scale(1.21);
}

select,
input:not([type="checkbox"]):not([type="radio"]),
textarea {
  -webkit-appearance: none;
  border-radius: 2px;
  padding: .4em .6em;
  background: #ffffff;
  border: 1px solid #bbbbbb;
}

.dark select,
.dark input:not([type="checkbox"]):not([type="radio"]),
.dark textarea {
  background: #555555;
  border: 1px solid #2a2a2a;
  color: #dddddd;
}

button {
  border: 1px solid #bbbbbb;
  box-shadow: 1px 1px 1px -2px #000000;
  background: #bbbbbb;
  color: #333333;
  border-radius: 3px;
  padding: .4em .6em;
}
.dark button {
  background: #555555;
  border: 1px solid #2a2a2a;
  color: #dddddd;
}

select,
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus {
  outline-width: 2px;
  outline-offset: -2px;
  outline-color: Highlight;
}

select {
  -webkit-appearance: menulist;
}

/* Tabs */
.tab-buttons {
  border-top: 1px solid #bbbbbb;
}
.tab-buttons > * {
  padding: .3em 1em;
  width: 100%;
  background: rgba(0,0,0,.2);
  border-bottom: 1px solid #aaaaaa;
  text-align: center;
}
.tab-buttons > :hover {
  background: rgba(0,0,0,.3);
}
.tab-buttons > .active {
  border-left: 1px solid #aaaaaa;
  border-right: 1px solid #aaaaaa;
  border-bottom: none;
  background: transparent;
}
.tab-buttons > .active:first-child {
  border-left-width: 0;
}
.tab-buttons > .active:last-child {
  border-right-width: 0;
}
.tab-content {
  border-bottom: 1px solid #bbbbbb;
}

.dark .tab-buttons {
  border-top: 1px solid #444444;
}
.dark .tab-buttons > *:not(.active),
.dark .tab-content {
  border-bottom: 1px solid #444444;
}
.dark .tab-buttons .active {
  border-left-color: #444444;
}
.dark .tab-buttons .active {
  border-right-color: #444444;
}

/* Hacks */
#preferences .tab-buttons {
  border-top: 0;
}
