@use 'sass:map' as map;
@use 'sass:color' as color;
@use '@angular/material' as mat;
@use 'styles/theming' as theming;

:host {
  display: block;
  position: relative;
  background-color: map.get(theming.$theme, 'color', 'accent', 'default');
  cursor: pointer;
}

%overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

%single-line-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.overlay {
  @extend %overlay;
  background-color: map.get(theming.$theme, 'color', 'foreground', 'base');
  opacity: 0;
  :host:hover & {
    opacity: map.get(theming.$theme, 'opacity', 'overlay', 'hover');
  }
}

.ripple {
  @extend %overlay;
}

.content {
  padding: 16px;
  background-color: map.get(theming.$theme, 'color', 'background', 'card');
  :host-context(.tablet-portrait) & {
    padding: 24px;
  }

  :host.starred & {
    border-top-left-radius: 24px;
    :host-context(.tablet-portrait) & {
      border-top-left-radius: initial;
    }
  }

  .headline {
    display: flex;
    justify-content: space-between;

    .titles {
      width: 0;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
      .subtitle {
        @extend %single-line-text;
        @include mat.typography-level(theming.$typography-config, 'caption');
      }
      .title {
        @include mat.typography-level(theming.$typography-config, 'title');
        :host.read & {
          color: map.get(
            theming.$theme,
            'color',
            'foreground',
            'secondary-text'
          );
        }
        a:focus {
          text-decoration: underline;
        }
      }
    }

    .actions {
      display: flex;
      gap: 8px;
      > * {
        :host.read & {
          color: map.get(
            theming.$theme,
            'color',
            'foreground',
            'secondary-text'
          );
        }
      }
      .avatar-button {
        :host:hover & {
          background-color: map.get(
            theming.$theme,
            'color',
            'background',
            'card'
          );
        }
      }
    }
  }

  .overview {
    @extend %single-line-text;
    margin-top: 8px;
    height: map.get(theming.$typography-config, 'body-1', 'line-height');
    white-space: pre;
  }
}
