@use '../_styles/_variables.scss' as *;
@use 'sass:color';

$card-prefix: '#{$prefix}-card';

.#{$card-prefix} {
  font: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  box-sizing: border-box;
  border-radius: $border-radius;
  background-color: $bg-color-container;
  color: $text-color-base;

  &.#{$card-prefix}-hover {
    cursor: pointer;
    &:hover {
      box-shadow: $shadow-surface;
    }

    .#{$card-prefix}-cover {
      margin-top: -1px;
      margin-inline-start: -1px;
      margin-inline-end: -1px;
    }
  }

  &.#{$card-prefix}-border {
    border: 1px solid $border-color;
  }

  .#{$card-prefix}-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    position: relative;
    border-bottom: 1px solid transparent;

    &.#{$card-prefix}-separator {
      border-color: $separator-color;
    }

    .#{$card-prefix}-header-wrapper {
      flex: 1;
      display: flex;
      align-items: center;
      margin-right: 16px;
      .#{$card-prefix}-title {
        font-size: 16px;
        color: $text-color-base;
        font-weight: 600;
        word-break: break-all;
      }
      .#{$card-prefix}-subtitle {
        font-size: 14px;
        color: $text-color-secondary;
        word-break: break-all;
      }
    }

    .#{$card-prefix}-actions {
      float: right;
    }
  }

  .#{$card-prefix}-body {
    display: flow-root;
    padding: 16px;
  }
  .#{$card-prefix}-footer {
    border-top: 1px solid transparent;

    &.#{$card-prefix}-separator {
      border-color: $separator-color;
    }
    display: flex;
    align-items: center;
    padding: 10px 16px;
  }

  .#{$card-prefix}-cover {
    display: flow-root;
    img {
      display: flow-root;
      width: 100%;
      max-height: 100%;
    }
  }
}