@import '../../../styles/core.scss';

// Generated from icon-paywalled.svg using this: https://dopiaza.org/tools/datauri/index.php
$icon-paywalled: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxMSAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iNS44MjgxMiIgY3k9IjUuNTUyNzMiIHI9IjUiIGZpbGw9IiMxM0NDQTAiLz4KPHBhdGggZD0iTTcuNzEwMiA0LjkwMjY2QzcuNjg5NTggNC44NjQ2NyA3LjY0OTUxIDQuODQwOTMgNy42MDYxOSA0Ljg0MDkzSDYuMzAxNjJWMi44MjQ4NUM2LjMwMTYyIDIuNzcyMjcgNi4yNjY4OCAyLjcyNTkzIDYuMjE2MzggMi43MTFDNi4xNjY4MSAyLjY5NTgzIDYuMTExNjcgMi43MTY0NSA2LjA4MzE5IDIuNzYwNjlMMy45NDg0MyA2LjA4MTNDMy45MjUwNCA2LjExNzc4IDMuOTIzNDIgNi4xNjQyMyAzLjk0NDI2IDYuMjAyMzNDMy45NjQ4OCA2LjI0MDMyIDQuMDA0OTUgNi4yNjM4NiA0LjA0ODI3IDYuMjYzODZINS4zNTI4NFY4LjI4MDE1QzUuMzUyODQgOC4zMzI3MyA1LjM4NzU4IDguMzc5MDYgNS40MzgwOCA4LjM5Mzk5QzUuNDQ4OTcgOC4zOTcyNCA1LjQ2MDMyIDguMzk4NzQgNS40NzE0NCA4LjM5ODc0QzUuNTExMDUgOC4zOTg3NCA1LjU0OTAzIDguMzc4ODEgNS41NzEyNyA4LjM0NDNMNy43MDYwMyA1LjAyMzY5QzcuNzI5NDIgNC45ODcyMSA3LjczMTA0IDQuOTQwNzcgNy43MTAyIDQuOTAyNjZaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K';

.MetricsDateRange {
  color: get(grays, 2);
  svg, svg path {
    fill: currentColor;
  }
  &-quickSet, &-quickSet--paywall {
    $bgc: var(--bgc, #{get(grays, -1)});
    box-shadow: 0 0 0 0em transparent;
    transition: .2s ease-out;
    border-radius: 4px;
    color: get(grays, 1);
    cursor: pointer;
    &:hover {
      outline: none;
      background-color: $bgc;
      // box-shadow: 0 0 .25em $bgc;
    }
    padding: .25em .5em;
    margin: -.5em;
    border: .9px dotted transparent;
    &:focus {
      outline: none;
      border: .9px dotted rgba(0, 0, 0, .3);
    }
  }
  &-quickSet--paywall {
    &:before {
      background: url($icon-paywalled) center/contain no-repeat;
      content: ' ';
      display: inline-block;
      height: 16px;
      margin: 0 4px -3px 0;
      width: 18px;
    }
  }
}