@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;

:host {
  display: block;
  padding: 0;

  .sky-tile-dashboard-layout-multi {
    display: none;
  }

  .sky-tile-dashboard-layout-single {
    display: block;
  }
}

:host-context(.sky-tile-dashboard-gt-xs) {
  :host-context(.sky-theme-default) {
    padding-top: $sky-padding-double;
  }
}

:host-context(.sky-tile-dashboard-multi-column) {
  display: flex;
  padding: 0 $sky-padding;

  .sky-tile-dashboard-layout-multi {
    display: block;
  }

  .sky-tile-dashboard-layout-single {
    display: none;
  }
}

.sky-assistive-text {
  @media screen {
    @include mixins.sky-screen-reader-only();
  }
}

:host-context(.sky-theme-default) {
  background-color: $sky-background-color-neutral-light;
}

:host-context(.sky-theme-modern .sky-layout-host-blocks) {
  padding: 0;
}
