@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .label {
    @apply block;
    font-family: var(--stzh-font-family-heavy);
    font-weight: var(--stzh-font-weight-heavy);
    font-style: normal;
    font-size: var(--stzh-font-nano-font-size);
    line-height: var(--stzh-font-nano-text-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: var(--stzh-color-grey61);
  }

  .stzh-border {
    border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIpSURBVHgB7d3BbeJAFMbxsYXFlRLYDtgKllIsC0vcEiqIU8EmB04glu2EdEAHYTvgbgv2vawdcdokni/ikP9Pwp6YyB59YCcej/SS0MrzfDQYDG6sOW1fb2qa5tt2uz2ECHbcsR33OQhcoT/70+n0uNlstt2G9LWRprmtqvCOMM/n89FWi9jOu3Yf9yHCFfszsdx+zWaz225D4ouyLG9Wq9WjfzpZlo3quj7Yjo8B/2VBTpMkOVp2e8/QcvudFEWRe8r2xnd/I+DDLi4T95Zl6tdNP21GAX112f3wa+jEW+v1ehfQ16FdT9OAaJd/bwhUjEDFCFSMQMUIVIxAxQhU5+Vfpy7QqMEJhGCjTv8ynM/n4wAJv6cPAAAAAAAAAPBVMCiq44P1qc8au5zfiH4sw7umaZ67Z0p3AbEqX3SBMpVRhMfIYgQqRqBiBCpGoGIEKkagYgQqRqBiBCpGoGIEKkagYgSqwxx7JebYfwIeJwEAAAAAAAD4UhgU1WGOvRBz7PUqXzDHXozHyGIEKkagYgQqRqBiBCr2GqhXqwmI5oHuvJFl2TigFy+y0jb3HuiTt+q6pjpNT3bL+ZKd11Ya2A8Pdj9/9DpCZVlOvMgKdUHe5pdIP6v9i2jZ7e1buvBCVUn3C0VR3KZp+vMD+6wseMm8Uq9FZB9kFeJuga/Zn4Ud+8EbyeXWtraSlwOavGcvw+FwvFwu/4QIyhJqV+jPzl5PfpZ3BVb+AjID1CfgWYnZAAAAAElFTkSuQmCC");
    border-image-slice: 24;
    border-image-width: 0.75rem;
    border-image-repeat: round;
  }

  .link {
    @apply underline decoration-primary text-primary;
  }

  .accordion-no-inner-padding .stzh-accordion-item__content-inner {
    @apply p-0;
  }

  /*
  *
  * input warnings
  *
  */

  /** date input / inputs in general */
  .input--warning .stzh-input__label {
    @apply !text-warning;
  }

  .input--warning .stzh-input__input {
    @apply !text-warning !border-warning;
  }

  .input--warning .stzh-input__error-listitem {
    @apply text-warning;
  }

  /** time input */
  .input--warning stzh-dropdown,
  /** selects */
  stzh-dropdown.input--warning {
    --color: var(--stzh-color-warning) !important;
    --border-color: var(--stzh-color-warning) !important;
    --label-color: var(--stzh-color-warning) !important;
    --placeholder-color: var(--stzh-color-warning) !important;
    --hover-color: var(--stzh-color-warning) !important;
    --hover-border-color: var(--stzh-color-warning) !important;
  }

  .input--warning .stzh-dropdown__error {
    @apply text-warning;
  }

  .input--warning {
    @apply text-warning;
  }

  .stzh-dropdown__select .stzh-dropdown__item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /** tables **/
  .aoz-table {
    table {
      @apply min-w-full;
    }

    tbody tr:nth-child(odd) {
      @apply bg-grey5;
    }
    [data-action] {
      @apply hover:bg-red-medium cursor-pointer;
    }

    th,
    td {
      @apply px-1 py-2 text-left border-b border-black56;
    }

    th:first-child,
    td:first-child {
      @apply pl-4;
    }

    th:last-child,
    td:last-child {
      @apply pr-4;
    }
  }

  .table--no-header .stzh-table__header {
    display: none;
  }

  .table--no-hover tr:hover td,
  .table--no-hover tr:hover th {
    @apply bg-white;
  }

  /** icons https: //designsystem.stadt-zuerich.ch/?path=/docs/tokens-icons--docs#sizes  **/
  .icon--xxsmall {
    --size: var(--stzh-icon-size-xxsmall);
  }
  .icon--xsmall {
    --size: var(--stzh-icon-size-xsmall);
  }
  .icon--small {
    --size: var(--stzh-icon-size-small);
  }
  .icon--medium {
    --size: var(--stzh-icon-size-medium);
  }
  .icon--large {
    --size: var(--stzh-icon-size-large);
  }
  .icon--xlarge {
    --size: var(--stzh-icon-size-xlarge);
  }

  /*
    STZH Design System Overrides
  */

  /* Headings */
  stzh-heading {
    --stzh-heading-color: theme("colors.primary-text");
  }

  td .stzh-dropdown__select .ts-control > input {
    min-width: 0 !important;
  }

  td .stzh-dropdown__select.has-items .ts-control > input {
    margin: 0 !important;
  }
}
.header__logobar.sc-stzh-header {
    background: transparent!important;
}

.stzh-dialog__backdrop.sc-stzh-dialog {
    background: rgba(0, 0, 0, 0.5)!important;
    --backdrop-opacity: 1
}

.stzh-popover__backdrop.sc-stzh-popover {
    background: rgba(0, 0, 0, 0.5)!important;
    --backdrop-opacity: 1
}

.removed-by-vanilla-nested {
    display: none;
}

.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input,
.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input {
  -webkit-text-fill-color: var(--stzh-color-grey70) !important;
  opacity: 1 !important;
}
/* stencilJS inlcudes this in head, but too late - 
content is already rendered by the time it gets in => layout will flash before loading */

stzh-microsite-teaserlist,
stzh-appointments,
stzh-datamessagelist-item,
stzh-contact,
stzh-amount,
stzh-sitemap,
stzh-datatable,
stzh-saptcha,
stzh-vbz-majorticker,
stzh-vbz-ticker,
stzh-anchornav,
stzh-audio,
stzh-upload,
stzh-footer,
stzh-langnav,
stzh-message,
stzh-monthyearpicker,
stzh-pagebottom,
stzh-timepicker,
stzh-accordion-item,
stzh-checkbox,
stzh-checkboxgroup,
stzh-dialog,
stzh-progressbar,
stzh-toggle,
stzh-fieldset,
stzh-olmap,
stzh-accordion,
stzh-actions,
stzh-appnav,
stzh-carousel,
stzh-cell,
stzh-chart,
stzh-container,
stzh-cspace,
stzh-datamessagelist,
stzh-details,
stzh-figure,
stzh-flyingfocus,
stzh-header,
stzh-hr,
stzh-hspace,
stzh-icon-sprite,
stzh-invert,
stzh-list,
stzh-list-item,
stzh-loadingbar,
stzh-metanav,
stzh-overlay,
stzh-page-skiplinks,
stzh-pagetitle,
stzh-pagetitle-hero,
stzh-ratio,
stzh-readspeaker,
stzh-row,
stzh-section,
stzh-show,
stzh-skin-portal-mitwirken,
stzh-skin-storybook-preview,
stzh-skiplink,
stzh-space,
stzh-sticky,
stzh-table,
stzh-textandimage,
stzh-visuallyhidden,
stzh-vspace,
stzh-button,
stzh-badge,
stzh-icon,
stzh-share,
stzh-progressbar-item,
stzh-vbz-linechip,
stzh-buttongroup,
stzh-loader,
stzh-actionset,
stzh-ghettobox,
stzh-richtext,
stzh-calendar,
stzh-sortable,
stzh-text,
stzh-heading,
stzh-chip,
stzh-clamp,
stzh-card,
stzh-chip-select,
stzh-card-list,
stzh-input,
stzh-datepicker,
stzh-radio,
stzh-radiogroup,
stzh-status,
stzh-datalist,
stzh-datalist-item,
stzh-dropdown,
stzh-menu-item,
stzh-menu,
stzh-link,
stzh-tooltip,
stzh-popover {
    visibility: hidden
}

.hydrated {
    visibility: inherit
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */