@use "sass:color";
@use "./../variables" as *;
@use "./../mixins/group" as *;

.tile {
  --tile-background: var(--white);
  --tile-hover-background: color-mix(in oklab, var(--html-color), #fff 95%);
  --tile-border-width: 1px;
  --tile-border-left-width: 4px;
  --tile-border-left-color: color-mix(in oklab, var(--html-color), #fff 95%);
  --tile-border-style: solid;
  --tile-border-color: var(--border-color-main);
  --tile-border-radius: 0;
  --tile-header-footer-padding-y: #{$tile-header-footer-padding-y};
  --tile-header-footer-padding-x: #{$tile-header-footer-padding-x};
  --tile-body-padding-y: #{$tile-body-padding-y};
  --tile-body-padding-x: #{$tile-body-padding-x};

  background-color: var(--tile-background);
  border: var(--tile-border-width) var(--tile-border-style) var(--tile-border-color);
  border-left-width: var(--tile-border-left-width);
  border-left-color: var(--tile-border-left-color);
  border-radius: var(--tile-border-radius);
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  flex: 1 1 auto;
  position: relative;

  $tile-margin-fallback: if(
    sass($enable-margins): var(--spacer) ; else: 0
  );

  margin-bottom: var(--tile-margin-bottom, #{$tile-margin-fallback});

  & > * {
    &:first-child {
      border-top-left-radius: calc(var(--tile-border-radius) - 1px);
      border-top-right-radius: calc(var(--tile-border-radius) - 1px);
    }

    &:last-child {
      border-bottom-left-radius: calc(var(--tile-border-radius) - 1px);
      border-bottom-right-radius: calc(var(--tile-border-radius) - 1px);
    }
  }

  & .tile__header,
  & .tile__footer {
    display: flex;
    flex-flow: row wrap;
    align-items: normal;
    padding: var(--tile-header-footer-padding-y) var(--tile-header-footer-padding-x);

    & > * {
      margin-bottom: 0;
    }
  }

  & .tile__header {
    border-bottom: var(--tile-border-width) var(--tile-border-style) var(--tile-border-color);
  }

  & .tile__footer {
    margin-top: auto;
    border-top: var(--tile-border-width) var(--tile-border-style) var(--tile-border-color);
  }

  & .tile__body {
    flex: 1 1 auto;
    width: 100%;
    padding: var(--tile-body-padding-y) var(--tile-body-padding-x);

    & + .tile__body {
      border-top: var(--tile-border-width) var(--tile-border-style) var(--tile-border-color);
    }
  }

  & .tile__image {
    flex: 1 0 100%;
    overflow: hidden;

    & img {
      width: 100%;
      height: auto;
    }
  }
}

.tiles {
  @include make-group-column;

  &.tiles--grouped {
    @include make-grouped-column;
  }
}

@each $key, $value in $all-colors {
  .tile--#{$key} {
    --tile-border-left-color: var(--#{$key});
  }
}