/* 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 .border-grey-lighter;
}

h1 {
  font-size: 24px;
}

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

p {
  @apply .mb-4;
}

pre {
  @apply .bg-grey-lighter .p-4 .mb-4 .overflow-auto .max-w-full min-w-0;
}

code {
  @apply .bg-grey-lighter .p-1;
}


/* Classes */

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

.input.success input {
  border-color: $successColor;
}

.input.errors .select:not(.selectize) select {
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px $errorColor, 0 1px 1px rgba(0, 0, 0, 0.1);
}

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


/* Header */

.ps-header {
  @apply .border-b .border-solid .border-grey-light .py-2 .flex .justify-between;
}


/* Swiper */

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


/* Notifications */

#notifications-wrapper {
  z-index: 20001;
}


/* Craft tweaks */

#header h1 {
  cursor: pointer;
}

#main-container {
  @apply .relative;
}

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

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


/* Plugin Store actions */

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

  & > * {
    @include margin-left(18px);
  }

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

    svg {
      @include svg-mask($secondarySubmitColor);
    }

    &:hover svg {
      @include svg-mask($secondarySubmitHoverColor);
    }

    .badge {
      @include margin(0, 0, 0, -6px);
      @apply .relative .inline-block .flex-shrink .text-white;
      top: -1px;
      padding: 0 6px;
      font-size: 11px;
      line-height: 16px;
      border-radius: 1em;
      background: $submitColor;
      box-shadow: 0 0 0 2px $bgColor;
    }
  }

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

    .photo {
      svg {
        @apply .align-middle;
        @include margin-right(7px);
        width: 22px;
        height: 22px;
        border-radius: 100%;
      }
    }

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

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

/* Tables */

.readable {
  table {
    display: block;
    overflow: auto;
    width: 100%;

    th {
      font-weight: 600;
    }

    td,
    th {
      border: 1px solid #dfe2e5;
      padding: 6px 13px;
    }

    tr {
      background-color: #fff;
      border-top: 1px solid #c6cbd1;
    }

    tr:nth-child(2n) {
      background-color: #f6f8fa;
    }

    img {
      background-color: transparent;
    }
  }
}