@charset "UTF-8";
@import '@craftcms/sass/mixins';

/* Basics */

html,
body,
div,
span,
object,
iframe,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
article,
main,
nav,
ins {
  min-width: 0;
}

hr {
  @apply tw-border-gray-200;
}

h1 {
  @apply tw-mb-0;
  font-size: 18px;
}

h2 {
  @apply tw-mt-8 tw-mb-4;
}

p {
  @apply tw-mb-4;
}

pre {
  @apply tw-bg-gray-200 tw-p-4 tw-mb-4 tw-overflow-auto tw-max-w-full tw-min-w-0;
}

code {
  @apply tw-bg-gray-200 tw-p-1;
}

/* Classes */

.no-line-height {
  line-height: 0;
}

.input.success input {
  border-color: var(--fg-success);
}

.input.errors .select:not(.selectize) select {
  box-shadow:
    inset 0 0 0 1px transparent,
    0 0 0 1px var(--fg-error),
    0 1px 1px rgb(0 0 0 / 10%);
}

input.error {
  @apply tw-border-red-600;
}

/* Header */

.ps-header {
  @apply tw-border-b tw-border-solid tw-border-gray-200 tw-py-2 tw-flex tw-justify-between;
}

/* Swiper */

.swiper-wrapper {
  min-width: auto;
}

/* Craft tweaks */

#header h1 {
  cursor: pointer;
}

#main-container {
  @apply tw-relative;
}

#main-content #content {
  @apply tw-relative;
}

#container {
  position: static !important; /* #container hack required for modal overlays */
}

/* Plugin Store actions */

#pluginstore-actions {
  @apply tw-flex tw-justify-between tw-items-center;

  & > * {
    margin-inline-start: 18px;
  }

  #cart-button {
    svg {
      @apply tw-inline-block;
      width: 18px;
      height: 18px;
      vertical-align: middle;
      line-height: 0;
      margin-inline-end: 3px;
    }

    svg {
      @include svg-mask(var(--bg-secondary));
    }

    &:hover svg {
      @include svg-mask(darken($secondaryColor, 5%));
    }

    .badge {
      margin-inline: -6px 0;
      margin-block: 0;
      @apply tw-relative tw-inline-block tw-flex-shrink tw-text-white;
      inset-block-start: -1px;
      padding-block: 0;
      padding-inline: 6px;
      font-size: 11px;
      line-height: 16px;
      border-radius: 1em;
      background: var(--bg-primary);
    }
  }

  #craftid-account {
    &:hover {
      @apply tw-no-underline;
    }

    .photo {
      svg {
        @apply tw-align-middle;
        margin-inline-end: 7px;
        width: 22px;
        height: 22px;
        border-radius: 100%;
      }
    }

    &:hover .label {
      @apply tw-no-underline;
    }
  }

  #craftid-connect-form {
    .ssl-status {
      @apply tw-inline-block;
    }
  }
}
