// horologion — colours are variables so you can point them at your own theme.
// Defaults are a neutral dark set; override them before the @import.

$horologion-fg:      #ebdbb2 !default;
$horologion-fg-dim:  #a89984 !default;
$horologion-accent:  #d3869b !default;
$horologion-red:     #fb4934 !default;
$horologion-yellow:  #fabd2f !default;
$horologion-surface: #282828 !default;
$horologion-overlay: #504945 !default;

.horologion {
  background-color: rgba(40, 40, 40, 0.82);
  border: 1px solid $horologion-overlay;
  border-radius: 14px;
  padding: 14px;
  color: $horologion-fg;
  min-width: 400px;

  .glyph-big { font-size: 28px; }
  .glyph     { font-size: 15px; }

  .title {
    font-weight: bold;
    font-size: 13px;
    &.feast { color: $horologion-accent; }
  }

  .sub {
    font-size: 10px;
    color: $horologion-yellow;
    &.obligatory { color: $horologion-red; font-weight: bold; }
  }

  .cycle {
    font-size: 10px;
    font-style: italic;
    color: rgba(168, 153, 132, 0.8);
  }

  .fast { font-size: 11px; color: $horologion-fg-dim; }

  .rule {
    background-color: rgba(80, 73, 69, 0.6);
    min-height: 1px;
  }

  .weekday { font-size: 11px; color: $horologion-yellow; }

  .day {
    font-size: 10px;
    color: $horologion-fg-dim;
    &.feast { color: $horologion-accent; }
  }

  .pascha { font-size: 10px; color: $horologion-fg-dim; }
}

.horologion-bar {
  .glyph { font-size: 14px; }
  .title { font-size: 12px; }
}