/* Variables */
@import url('./variables/global.css');
@import url('./variables/colors.css');
@import url('./variables/layout.css');
@import url('./variables/spacing.css');
@import url('./variables/typography.css');

/* Styles */
@import url('./base/global.css');
@import url('./base/layout.css');
@import url('./base/typography.css');
@import url('./base/buttons.css');
@import url('./base/forms.css');

:host, :root, .dropin-design {
  /* Border radius */
  --border-radius-1: 1px;
  --border-radius-2: 2px;
  --border-radius-3: 3px;
  --border-radius-4: 4px;
  --border-radius-5: 5px;
  --border-radius-6: 6px;
  --border-radius-7: 7px;
  --border-radius-8: 8px;
  --border-radius-9: 9px;
  --border-radius-10: 10px;
  --border-radius-11: 11px;
  --border-radius-12: 12px;
  --border-radius-13: 13px;
  --border-radius-14: 14px;
  --border-radius-15: 15px;
  --border-radius-16: 16px;
  --border-radius-20: 20px;
  --border-radius-24: 24px;
  --border-radius-30: 30px;
  --shape-border-radius-1: var(--border-radius-3);
  --shape-border-radius-2: var(--border-radius-8);
  --shape-border-radius-3: var(--border-radius-24);

  /* Border width */
  --border-width-1: 1;
  --border-width-1-5: 1.5px;
  --border-width-2: 2;
  --border-width-3: 3;
  --border-width-4: 4;
  --shape-border-width-1: var(--border-width-1);
  --shape-border-width-2: var(--border-width-1-5);
  --shape-border-width-3: var(--border-width-2);
  --shape-border-width-4: var(--border-width-4);
  --shape-shadow-1: 0 0 16px 0 rgb(0 0 0 / 16%);
  --shape-shadow-2: 0 2px 16px 0 rgb(0 0 0 / 16%);
  --shape-shadow-3: 0 2px 3px 0 rgb(0 0 0 / 16%);
  --shape-icon-stroke-1: 1px;
  --shape-icon-stroke-2: 1.5px;
  --shape-icon-stroke-3: 2px;
  --shape-icon-stroke-4: 4px;
}


main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.icon {
  display: inline-flex;
  min-width: max-content;
}

* {
  &:has( > span.icon),
  &:has( > p > span.icon) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  & > p {
    &:has( > span.icon) {
      margin-bottom: 0;
    }
  }

  outline-offset: 4px;
}

.icon img {
  height: 100%;
  width: 100%;
}

/* Base Design System Tokens */
.dropin-design.dropin-design {
  --background-none: none 0 0% no-repeat padding-box;
}

.dropin-input-date__icon {
  z-index: 2;
}

body.columns main > .section > div {
  max-width: unset;
  padding: unset;
}


body.columns main > .section:empty {
  display: none;
}

@media (min-width: 600px) {
  body.columns main {
      padding: var(--spacing-large) var(--spacing-big);
  }
}

@media (min-width: 900px) {
  body.columns main {
    flex-direction: row;
  }
}

/**
* Reset main element visibility
* https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden
*/
main[hidden] {
  display: none !important;
}