@use '@kirbydesign/core/src/scss/utils';

@mixin rounded($border-radius: utils.border-radius('n')) {
  @include rounded-top($border-radius);
  @include rounded-bottom($border-radius);
}

@mixin rounded-top($border-radius: utils.border-radius('n')) {
  border-top-left-radius: $border-radius;
  border-top-right-radius: $border-radius;
  overflow: hidden;
}

@mixin rounded-bottom($border-radius: utils.border-radius('n')) {
  border-bottom-left-radius: $border-radius;
  border-bottom-right-radius: $border-radius;
  overflow: hidden;
}

@mixin shadow() {
  box-shadow: utils.get-elevation(2);
}

@mixin first-item-padding() {
  /* stylelint-disable-next-line selector-pseudo-element-no-unknown */
  > ::ng-deep {
    :first-child {
      --item-padding-top: #{utils.size('xxs')};
    }
  }
}

@mixin last-item-padding() {
  /* stylelint-disable-next-line selector-pseudo-element-no-unknown */
  > ::ng-deep {
    :last-child {
      --item-padding-bottom: #{utils.size('xxs')};
    }
  }
}

/*
 * Utilities for styling lists and items within the list. 
 * These can be used to create list-like appearance of elements 
 * in use-cases where more freedom is needed than the list-component can offer.
 */

.rounded {
  @include rounded;
}

.shadow {
  @include shadow;
}

.first-item-padding {
  @include first-item-padding;
}

.last-item-padding {
  @include last-item-padding;
}

.first-item {
  @include rounded-top;
  @include first-item-padding;
}

.last-item {
  @include rounded-bottom;
  @include last-item-padding;
}