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

:host {
  display: flex;

  // Make all columns within a tile dashboard the same width.
  flex-grow: 1;
  // flex-basis is set in the template based on the number of columns in the dashboard.
  overflow: hidden;
}

@include mixins.sky-host-responsive-container-xs-min() {
  padding: 0;
}

@include mixins.sky-host-responsive-container-sm-min() {
  padding: 0 $sky-padding;
}

.sky-tile-dashboard-column {
  // Ensure at least a 100 pixel drop target in case the column has no tiles and no
  // other column is tall enough to give it a reasonable drop target.
  min-height: 100px;
  width: 100%;
}

@include mixins.sky-theme-modern {
  @include mixins.sky-host-responsive-container-sm-min() {
    padding: $sky-theme-modern-padding-h-md;
  }
}

:host-context(.sky-theme-modern .sky-layout-host-blocks) {
  @include mixins.sky-host-responsive-container-sm-min() {
    &.sky-tile-dashboard-layout-multi {
      &-first {
        padding-left: 0;
      }

      &-last {
        padding-right: 0;
      }
    }

    &.sky-tile-dashboard-layout-single {
      padding-left: 0;
      padding-right: 0;
    }
  }
}
