
.button-with-icon {
    font-size: 14px;
    margin-top: 24px;
    margin-right: 12px;
    display: inline-block;
    border-radius: var(--border-radius);
    background-color: var(--accent-color);
    color: var(--background-color);
    padding: 0.5em 0.75em;
    font-weight: 600;
  }
  
  
  button.copy {
    background-color: transparent;
    border-radius: var(--border-radius);
    color: var(--accent-color);
    margin-left: 6px;
    cursor: pointer;
    border:none
  }
  
  button.copy:hover {
    color: var(--accent-color)
  }
  
  /* otherwise, the button icon is not clickable */
  button.copy span {
    pointer-events: none;
  }
  
  button.copy.copied {
    color:darkgreen
  }
  


  a.close-button {
    color:var(--accent-color);
    position: absolute;top:1.85rem;right:4rem;
    transform: scale(1.0);    
    transition: transform 0.2s;
}

a.close-button > span {
    display: flex;flex-direction: column;
    justify-content: center;align-items: center;width: 40px;height: 40px;
    text-align: center;background: #e4eafb;
    border-radius: 40px;
    transition: background-color 0.2s;
}

a.close-button > span > svg {
    fill: currentColor
}

a.close-button:hover {
    transform: scale(1.1);
}

a.close-button:hover > span,
.template-button:hover {
    background-color: #e4eafb75;
}

.template-button {
    border:none;cursor: pointer; font-size:14px;
    display:  inline-block;border-radius: var(--border-radius);
    /* background-color: #e4eafb; */
    transition: background-color 0.2s;
    color:#656e82;padding:0.333em 0.66em;margin:0 6px 0;
}

.template-button.selected {
    color: var(--accent-color);
    font-weight: 600;
    outline: none;
    position: relative;
}

.template-button.selected:after {
      border-bottom: 2px solid var(--accent-color);
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -9px;
}

.template-button.red {
    color: red
}

.template-button.right-aligned {
    align-self: flex-end;
}

.template-button svg {
    fill:currentColor;vertical-align: middle;position:relative;top:-0.1em;
    margin-right: 4px;
}

.template-button span {
  vertical-align: middle;position:relative;top:-0.1em;
  margin-right: 4px;
}

.template-button.right-aligned svg {
    margin-right: 0;
    margin-left: 4px;
}
