/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Crypto Tracker - Real-time Cryptocurrency Visualization   - */
/* -                                                          - */
/* - Author: Cylian                                           - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Color Variables                                          - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
:root {
  --crypto-color-positive: var(--color-green);
  --crypto-color-negative: var(--color-red);
  --crypto-color-chart: var(--draw-color-primary); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Layout                                                   - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
layout-main main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  gap: 1.5rem; }

layout-main #crypto-canvas {
  border: 1px solid var(--draw-color-surface);
  border-radius: 4px;
  background: var(--background-color-surface); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Options Widget                                           - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.crypto-options {
  display: flex;
  flex-flow: column nowrap;
  gap: .75rem; }
  .crypto-options label {
    display: block;
    font-size: .85em;
    font-weight: 500;
    color: var(--text-color-muted);
    margin-bottom: .25rem; }
  .crypto-options select {
    width: 100%;
    padding: .5rem .75rem;
    border: 1px solid var(--draw-color-surface);
    border-radius: 4px;
    background: var(--background-color-surface);
    color: var(--text-color-surface);
    font-size: .9em;
    cursor: pointer;
    transition: border-color 0.2s ease; }
    .crypto-options select:hover {
      border-color: var(--draw-color-primary); }
    .crypto-options select:focus {
      outline: none;
      border-color: var(--draw-color-primary);
      box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2); }
    .crypto-options select option {
      background: var(--background-color-surface);
      color: var(--text-color-surface); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Statistics Widget                                        - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
aside.right dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem .75rem;
  margin: 0; }
  aside.right dl dt {
    font-size: .85em;
    color: var(--text-color-muted);
    font-weight: 400; }
  aside.right dl dd {
    margin: 0;
    font-size: .9em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--text-color-surface); }

aside.right #stat-change-24h {
  font-weight: 700; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Responsive Adjustments                                   - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media (max-width: 768px) {
  .crypto-options {
    flex-flow: row wrap;
    gap: .5rem; }
    .crypto-options label {
      width: 100%; }
    .crypto-options select {
      flex: 1;
      min-width: 120px; } }