/* login - переписать под ::slotted, но непонятно зачем, пока не используется */
[slot='title'] h1 {
    color: inherit;
}

[slot='title'] hr {
    color: inherit;
    background-color: currentcolor;
    height: var(--lumo-space-xs);
}

/* notification */
vaadin-notification-card.p-0::part(content) {
    padding: 0;
}

/* menu scroll - проверить цвет после кастомизации, ширину ползунка от экрана */
vaadin-app-layout > vaadin-scroller {
    scrollbar-width: thin;
    scrollbar-color: #cdcdcd transparent;
}

vaadin-app-layout > vaadin-scroller::-webkit-scrollbar {
    width: 8px;
}

vaadin-app-layout > vaadin-scroller::-webkit-scrollbar-thumb {
    background-color: #cdcdcd;
}

vaadin-app-layout > vaadin-scroller::-webkit-scrollbar-thumb:hover {
    background-color: #a6a6a6;
}

vaadin-app-layout > vaadin-scroller::-webkit-scrollbar-thumb:active {
    background-color: #606060;
}

vaadin-app-layout > vaadin-scroller::-webkit-scrollbar-track {
    background: transparent;
}




/* временно, почему html? #d52b1e */
html {
  --lumo-primary-color: hsl(from #da291c h s l);
  --lumo-primary-color-50pct: hsla(from #da291c h s calc(l + 1) / 0.76);
  --lumo-primary-color-10pct: hsla(from #da291c h s calc(l + 12) / 0.13);
  --lumo-primary-text-color: hsl(from #da291c h s calc(l - 5));
}
/* пересмотреть, см. выше, хочется везде использовать переменные lumo */
.v-loading-indicator {
  background-color: hsl(from #ffc72c h s l) !important;
}

vaadin-login-overlay-wrapper::part(backdrop) {
  background-image: url("./images/Red-Hockey.png");
  background-position: center top;
  background-size: cover;
/*  display: flex;
  height: 500px; */
}

vaadin-tabsheet {
  min-height: calc(var(--lumo-size-l) * 2);
}
vaadin-tabsheet::part(content) {
  padding-top: 0;
  padding-bottom: 0;
}

vaadin-form-layout [disabled][has-label]::part(label) {
  --lumo-disabled-text-color: var(--lumo-secondary-text-color);
}
vaadin-form-layout > h4 {
  border-bottom: thin dotted;
}
/* пока так */
vaadin-form-layout {
  overflow-x: hidden;
}

vaadin-form-layout :where(vaadin-text-field, vaadin-select, vaadin-text-area) {
  padding-top: var(--lumo-space-xs);
}

vaadin-dialog-overlay[has-header]::part(header) {
  padding: 0 var(--lumo-space-xs);
}

vaadin-dialog-overlay[has-header]::part(title) {
  margin-inline-start: calc(var(--lumo-space-m) - var(--lumo-space-xs));
}

vaadin-dialog-overlay::part(title) {
  font-size: var(--lumo-font-size-l);
}

vaadin-dialog-overlay::part(footer) {
  padding-top: var(--lumo-space-xs);
  padding-bottom: var(--lumo-space-xs);
}
/* подумать */
vaadin-dialog-overlay h4 {
  border-bottom: thin dotted;
}

vaadin-dialog-overlay > vaadin-vertical-layout > vaadin-custom-field {
  padding-top: var(--lumo-space-xs);
}

vaadin-dialog-overlay > vaadin-vertical-layout > :where(h4, vaadin-custom-field, vaadin-text-area):first-child {
  padding-top: 0;
}
/* filled */
vaadin-dialog-overlay > vaadin-vertical-layout > vaadin-list-box {
  background-color: var(--lumo-contrast-5pct);
  border-radius: var(--lumo-border-radius-m);
}

vaadin-dialog-overlay > vaadin-tabsheet > vaadin-tabs {
  min-height: initial;
}

vaadin-dialog-overlay > vaadin-tabsheet > vaadin-tabs > vaadin-tab {
  padding-top: 0;
}

vaadin-dialog-overlay > vaadin-tabsheet > vaadin-tabs::part(back-button),
vaadin-dialog-overlay > vaadin-tabsheet > vaadin-tabs::part(forward-button) {
  align-items: end;
}

vaadin-dialog-overlay > vaadin-tabsheet > vaadin-tabs::part(tabs) {
  margin-left: var(--lumo-space-xs);
  margin-right: var(--lumo-space-s);
}

vaadin-popover-overlay::part(content) {
  max-width: 333px;
}