@use 'sass:math'
@use '../../styles/tools'
@use './variables' as *

.v-banner
  display: grid
  flex: 1 1
  font-size: $banner-font-size
  grid-template-areas: "prepend content actions"
  grid-template-columns: max-content auto max-content
  grid-template-rows: max-content max-content
  line-height: $banner-line-height
  overflow: hidden
  padding-inline: $banner-padding-inline-start $banner-padding-inline-end
  padding-top: $banner-padding * 2
  padding-bottom: $banner-padding * 2
  position: relative
  width: $banner-width

  @include tools.border($banner-border...)
  @include tools.elevation($banner-elevation)
  @include tools.position($banner-positions)
  @include tools.rounded($banner-border-radius)
  @include tools.theme($banner-theme...)

  &--rounded
    @include tools.rounded($banner-rounded-border-radius)

  &--stacked
    &:not(.v-banner--one-line)
      grid-template-areas: "prepend content" ". actions"

    .v-banner-text
      padding-inline-end: $banner-stacked-padding-inline-end

  @at-root
    @include tools.density('v-banner', $banner-density) using ($modifier)
      .v-banner-actions
        margin-bottom: -($banner-padding + $modifier)

      &.v-banner--one-line
        padding-top: $banner-padding + $modifier
        padding-bottom: $banner-padding + $modifier

        .v-banner-actions
          margin-bottom: 0

      @if ($modifier == 0px)
        &.v-banner--one-line
          padding-top: $banner-padding + $modifier + 2

      &.v-banner--two-line
        padding-top: $banner-padding * 2 + $modifier
        padding-bottom: $banner-padding * 2 + $modifier

      &.v-banner--three-line
        padding-top: $banner-padding * 3 + $modifier
        padding-bottom: $banner-padding * 2 + $modifier

      &:not(.v-banner--one-line),
      &.v-banner--two-line,
      &.v-banner--three-line
        .v-banner-actions
          margin-top: $banner-action-margin + $modifier

  &--sticky
    top: $banner-sticky-top

.v-banner__content
  align-items: center
  display: flex
  grid-area: content

.v-banner__prepend
  align-self: flex-start
  grid-area: prepend
  margin-inline-end: $banner-prepend-margin-end

.v-banner-actions
  align-self: flex-end
  display: flex
  flex: 0 1
  grid-area: actions
  justify-content: flex-end

  .v-banner--two-line &,
  .v-banner--three-line &
    margin-top: $banner-actions-line-margin-top

.v-banner-text
  -webkit-box-orient: vertical
  display: -webkit-box
  padding-inline-end: $banner-text-padding-end
  overflow: hidden

  .v-banner--one-line &
    -webkit-line-clamp: 1

  .v-banner--two-line &
    -webkit-line-clamp: 2

  .v-banner--three-line &
    -webkit-line-clamp: 3

  .v-banner--two-line &,
  .v-banner--three-line &
    align-self: flex-start