@vertical-insure/web-components/lib/offer-box-styles.js

Vertical Insure Web Components using Lit and Open Web Standards

import { css } from "lit";
const offerBoxStyles = css`
  :host {
    font-size: var(--default-vi-font-md);
    font-family: var(--default-vi-font-family);
    margin-top: 10px;
    flex: 1;
  }

  * {
    box-sizing: border-box;
  }

  a, a:visited {
    color: var(--default-vi-primary-color);
  }

  a:hover {
    text-decoration: none;
  }

  #offer-wrapper {
    max-width: 1024px;
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: stretch;
  }

  #offer-display {
    padding: var(--default-vi-container-padding);
    container-type: inline-size;
    max-width: 1024px;
    display: flex;
    flex-direction: column;
    gap: var(--default-vi-offer-display-spacing);
    height: 100%;
    background-color: var(--default-vi-bg-color);
    outline: 1px solid var(--default-vi-border-color);
    border-radius: var(--default-vi-border-radius);
    box-sizing: border-box;
    position: relative;
  }

  section#coverage {
    font-family: var(--default-vi-font-family);
    font-size: var(--default-vi-font-sm);
  }

  #offer-content {
    display: flex;
    gap: var(--default-vi-offer-content-spacing);
  }

  descriptor-list {
    flex: 1 55%;
  }

  /* SHARED ACTION ELEMENT STYLES */ 
  #actions {
    display: flex;
    gap: var(--default-vi-action-spacing);
    flex-direction: column;
    flex: 1 45%;
  }

  #actions #action-header {
    font-family: var(--default-vi-action-header-font-family);
    font-size: var(--default-vi-action-header-font-size);
    font-weight: var(--default-vi-action-header-font-weight);
    margin-bottom: 4px;
  }

  @container (max-width: 700px) {
    #offer-content {
      flex-direction: column-reverse;
    }

    #offer-display {
      gap: var(--default-vi-offer-display-spacing);
    }
  }

  @media (max-width: 700px) {
    #offer-content {
      flex-direction: column-reverse;
    }
    #offer-display {
      gap: var(--default-vi-offer-display-spacing);
    }
  }

  loading-animation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // background: rgba(255, 255, 255, 0.5);
    // backdrop-filter: blur(2px);
    z-index: 99;
    border-radius: var(--default-vi-border-radius);
  }

  section#errors {
    color: var(--default-vi-danger-color);
    font-family: var(--default-vi-error-font-family);
    font-weight: var(--default-vi-error-font-weight);
    font-size: var(--default-vi-error-font-size);
    margin-bottom: 10px;
  }

  section#errors p {
    margin: 0;
  }

  #offer-tag {
    position: absolute;
    bottom: 100%;
    right: 0;
    font-size: var(--default-vi-font-md);
    font-weight: bold;
    color: var(--default-vi-tag-contrast-color);
    background: var(--default-vi-tag-color);
    padding: 5px 15px;
    min-width: 180px;
    text-align: center;
    border-radius: 8px;
    display: var(--default-vi-tag-display);
    transform:translate(-10%, 50%);
  }

  .badge {
    font-size: var(--default-vi-font-md);
    font-weight: bold;
    color: var(--default-vi-tag-contrast-color);
    background: var(--default-vi-tag-color);
    padding: 2px 10px;
    text-align: center;
    border-radius: 8px;
  }

  #offer-display.selected {
    outline: 2px solid var(--default-vi-primary-color);
  }

  @keyframes radiomark {
    0% {
      box-shadow: 0 0 0 12px white inset, 0 0 0 12px white inset;
    }
    50% {
        box-shadow: 0 0 0 2px white inset, 0 0 0 2px white inset;
    }
    100% {
        box-shadow: 0 0 0 3px white inset, 0 0 0 3px white inset;
    }
  }

  input[type=radio] {
    border: var(--default-vi-radio-default-border);
    flex-shrink: 0;
    height: 1.25rem;
    width: 1.25rem;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 9999px;
    margin-top: 1px;
  }
  
  input[type=radio]:checked, input[type=radio][aria-checked=true] {
    background: var(--default-vi-radio-default-color);
    background-image: none;
    animation: radiomark var(--animation-input, .2s) ease-out;
    box-shadow: 0 0 0 3px white inset, 0 0 0 3px white inset;
  }

  fieldset {
    border: none;
    padding: 0;
  }

  fieldset div {
    display: flex;
    column-gap: 1.5rem;
    align-items: center;
  }

  fieldset label {
    display: flex;
    align-items: center;
    column-gap: 3px;
  }
  
  .text-xs {
    font-size: var(--default-vi-font-xs);
  }

  .text-sm {
    font-size: var(--default-vi-font-sm);
  }

  .text-md {
    font-size: var(--default-vi-font-md);
  }

  .text-lg {
    font-size: var(--default-vi-font-lg);
  }

  .text-xl {
    font-size: var(--default-vi-font-xl);
  }

  .uppercase {
    text-transform: uppercase;
  }

  .capitalize {
    text-transform: capitalize;
  }

  h1,h2,h3,h4,h5,h6 {
    margin: 0;
  }

  button {
    border: 2px solid var(--default-vi-primary-color);
    border-radius: var(--default-vi-border-radius);
    font-size: var(--default-vi-font-md);
    background-color: var(--default-vi-primary-color);
    color: var(--default-vi-primary-contrast-color);
    padding: 5px 12px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    gap: 4px;
    align-items: center;
  }

  button:hover {
    opacity: 0.85;
  }

  button:disabled {
    opacity: 0.65;
  }

  .text-balance {
    text-wrap: balance;
  }

  .option-required {
    color: var(--default-vi-danger-color);
  }

`;
export {
  offerBoxStyles as default
};