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

.sky-tile {
  background-color: #fff;
  margin-bottom: $sky-margin-double;
}

/* NOTE: This style is here as we only want it when inside a tile dashboard */
:host-context(
    .sky-tile-dashboard-layout-single,
    .sky-tile-dashboard-layout-multi
  )
  .sky-tile {
  margin-bottom: 0;
}

:host-context(.sky-tile-dashboard-gt-xs) {
  :host-context(.sky-tile-dashboard-layout-single),
  :host-context(.sky-tile-dashboard-layout-multi) {
    .sky-tile {
      margin-bottom: $sky-margin-double;
    }
  }

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

.sky-tile-header {
  border-color: $sky-border-color-neutral-medium;
  border-style: solid solid none;
  border-width: 4px 0 0;
  display: flex;
}

.sky-tile-header-content {
  display: flex;
  flex: 1;
  align-items: baseline;
  cursor: pointer;
}

.sky-tile-header-title {
  display: inline-flex;
  align-items: baseline;
  padding: $sky-padding $sky-tile-header-tool-padding;

  > sky-help-inline {
    margin-left: var(--sky-margin-inline-xs);
  }
}

.sky-tile-summary {
  color: $sky-text-color-action-primary;
  display: none;
  padding-right: $sky-tile-header-tool-padding;
  max-height: 30px;
  overflow: hidden;
}

.sky-tile-collapsed {
  .sky-tile-summary {
    display: block;
  }
}

.sky-tile-header-column-tools {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.sky-tile-tools {
  display: flex;
  padding-right: $sky-space-lg;
}

.sky-tile-tools-control {
  @include mixins.sky-icon-button-borderless();
  border: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  display: block;
  margin: 0;
  margin-left: 9px;
}

.sky-tile-grab-handle {
  cursor: move;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  font-size: 15px;
}

.sky-tile-content {
  border-color: $sky-border-color-neutral-light;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0;
}

@include mixins.sky-theme-modern {
  .sky-tile-header,
  .sky-tile-content {
    border: none;
  }

  .sky-tile-header-title {
    padding: 0;
    margin: 0 $sky-theme-modern-margin-inline-xl 0 0;
  }

  .sky-tile-header-column-tools {
    align-items: flex-start;
  }

  .sky-tile-tools {
    padding: 0;
  }

  .sky-tile-tools-control {
    font-size: 18px;
    color: $sky-theme-modern-color-gray-70;
  }

  .sky-tile-grab-handle {
    font-size: 16px;
  }

  @include mixins.sky-host-responsive-container-xs-min() {
    .sky-tile {
      border-radius: 0px;
    }
  }

  @include mixins.sky-host-responsive-container-sm-min() {
    .sky-tile {
      border-radius: $sky-theme-modern-box-border-radius-default;
    }
  }
}

:host-context(.sky-theme-modern .sky-tile-dashboard-gt-xs) {
  :host-context(.sky-tile-dashboard-layout-single),
  :host-context(.sky-tile-dashboard-layout-multi) {
    .sky-tile {
      margin-bottom: $sky-theme-modern-space-xl;
    }
  }
}
