// Copyright 2023 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "../card/card-variables";

// use an extra selector to increase specificity
.#{$ns}-card.#{$ns}-control-card {
  &,
  .#{$ns}-card-list > & {
    // min-height & padding will be set on the label element so that it can take up the full size of the card and
    // its entire visual element will be interactive  This is partially to work around https://github.com/palantir/blueprint/issues/6251
    min-height: auto;
    padding: 0;
  }
}

.#{$ns}-control-card {
  // need a lot of specificity here to override control styles for (switch, checkbox, etc.) and (align-left, align-right)
  // N.B. this is more space-efficient (in terms of generated CSS) than listing multiple compound selectors
  .#{$ns}-control.#{$ns}-control.#{$ns}-control {
    // control indicators should be top-aligned
    align-items: flex-start;
    display: flex;
    gap: $pt-spacing * 2;
    margin: 0;
    padding: $card-padding;
    width: calc(100%);

    &.#{$ns}-align-left {
      flex-direction: row;
      justify-content: flex-start;
    }

    &.#{$ns}-align-right {
      flex-direction: row-reverse;
      justify-content: space-between;
    }

    .#{$ns}-card-list & {
      padding: $card-padding;
    }

    .#{$ns}-card-list.#{$ns}-compact & {
      padding: $card-padding-compact;
    }

    .#{$ns}-control-indicator {
      margin: 0;
    }
  }

  &.#{$ns}-compact .#{$ns}-control.#{$ns}-control.#{$ns}-control {
    padding: $card-padding-compact;
  }
}