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

@include tools.layer('components')
  .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
      z-index: $banner-sticky-z-index

  .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