@charset "UTF-8";

@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}

@import url('https://rsms.me/inter/inter.css');

$editIcon: 'url(${chrome.runtime.getURL("images/editicon.svg")})';

// Edit to change color scheme

.quoteback-container{
  --background-color: white;
  --border-color-normal: #C2DFE3;
  --border-color-hover: #9DB8BF;

  --author-color: black;
  --title-color: #5C6D73;
  --gototext-color:#9DB8BF;

  --content-color:#464A4D;
  --internal-blockquote-color:#5C6D73;
  
  @media (prefers-color-scheme: dark) {
    --background-color: #161717;
    --border-color-normal: #253237;
    --border-color-hover: #5C6D73;

    --author-color: #E0FBFC;
    --title-color: #9DB8BF;
    --gototext-color:#5C6D73;

    --content-color:#9DB8BF;
    --internal-blockquote-color:#5C6D73;
  }  
}

.quoteback-container{
  font-family: "SF Pro Text", -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  text-rendering: optimizeLegibility;
  border: 1px solid var(--border-color-normal);
  border-radius: 8px;
  margin-bottom: 25px;
  max-width:800px;
  background-color:var(--background-color);
  text-align:left;

  @include transition(all .20s ease);
  &:hover{
    transform: translateY(-3px);
    box-shadow: 0px 6px 20px 0px rgba(0,0,0,.15);
    border: 1px solid var(--border-color-hover);
  }
  
  .quoteback-parent{
    overflow:hidden;
    position: relative;
    width:100%;
    box-sizing: border-box;
    .quoteback-content{
      font-family: -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
      font-size:16px;
      font-weight:400;
      padding: 15px; 
      color: var(--content-color);
      line-height:150%;
      em{
        font-family:inherit;
      }
    }
  }

  .quoteback-head{
    border-top: 1px solid var(--border-color-normal);
    display:flex;
    flex-flow:row nowrap;
    justify-content: start;
    align-items: stretch;
    padding-left:15px;
    @include transition(all .20s ease); 

    .quoteback-avatar{
      border-radius:100%;
      border: 1px solid var(--border-color-normal);
      width:42px;
      height:42px;
      min-width:42px !important;
      margin: 12px 0px;
      position:relative;
      .mini-favicon{
        width:22px;
        height:22px;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }

    .quoteback-metadata{
      min-width:0px;
      display:flex;
      flex-shrink:1;
      align-items:center;         
      margin-left:10px;
    }       
    .metadata-inner{
      font-size: 14px;
      line-height:1.2;
      width: 100%;
      max-width:525px;
      @media(max-width:414px){
        max-width: 200px;
      }

      .quoteback-title{
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis;
        font-weight:600;
        padding-right:20px;
        color: var(--title-color);                  
      }
      .quoteback-author{
        font-size:14px;
        line-height:1.2;
        color: var(--author-color);
        font-weight:600;
        margin-bottom:2px;
      }                         
    }
    .quoteback-backlink{
      margin-left: auto;
      display:flex;
      flex-shrink:1;
      align-items:center;
      width:81px;
      min-width:81px !important;
      padding: 0px 15px !important;
      border-left: 1px solid var(--border-color-normal);
      .quoteback-arrow{
        border: none !important;
        font-family:inherit !important;
        font-size: 14px !important;
        color: var(--gototext-color) !important;
        text-decoration:none !important;
        @include transition(opacity .15s ease);
        &:hover{
          opacity:.5 !important;
        }
        &:visited{
          text-decoration: none !important;
        };
      }
    }
  }   
}

.editable{
  &:focus{
    outline:none;
  }
  &:before{
    margin-right:8px;
    content: $editIcon; 
  }
}

.quoteback-content{
  a{
    color: var(--content-color);
    @include transition(opacity .2s ease);
    &:hover{
      opacity:.5;
    }
  }
  p{
    margin-block-start:0px;
    margin-block-end:.5em;
    &:last-of-type{
      margin-block-end:0px;
    }
  }
  img {
    width:100%;
    height: auto;
    margin: .5em 0em;
  }
  blockquote{
    border-left: 2px solid var(--border-color-normal);
    padding-left: .75em;
    margin-inline-start: 1em;
    color: var(--internal-blockquote-color);
  }
  ol, ul{
    margin-block-start: .5em;
    margin-block-end: .5em;
  }
  h1, h2, h3{
    margin-block-start: .5em;
    margin-block-end: .5em;
  }
}
