@use "../../../styles/abstracts/functions" as fun;
@use "../../../styles/abstracts/mixins" as mix;

.modal {
  position: relative;
  box-shadow:
    fun.convert-px(0.2) fun.convert-px(0.2) fun.convert-px(0.3) 0
      var(--color-shadow),
    fun.convert-px(1.5) fun.convert-px(1.5) fun.convert-px(2.5)
      fun.convert-px(-0.3) var(--color-shadow),
    fun.convert-px(4.7) fun.convert-px(4.7) fun.convert-px(8) fun.convert-px(-1)
      var(--color-shadow);

  &--primary {
    padding: clamp(var(--spacing-xs), 2.5vw, var(--spacing-md));
    background: var(--color-bg-secondary);
    border: fun.convert-px(3) solid;
    border-image: radial-gradient(
        ellipse at top,
        var(--color-primary-lighter) 20%,
        var(--color-primary) 100%
      )
      1;

    .title {
      margin-bottom: var(--spacing-2xs);
    }

    @include mix.media("screen") {
      @include mix.dimensions(null, "sm") {
        border-left: none;
        border-right: none;
      }
    }
  }

  &--secondary {
    padding: clamp(var(--spacing-xs), 2.2vw, var(--spacing-sm));
    background: var(--color-bg);
    border: fun.convert-px(2) solid var(--color-primary-dark);
    border-radius: fun.convert-px(3);

    .title {
      padding-inline: var(--spacing-xs);
      background: var(--color-bg);
      border: fun.convert-px(1) solid var(--color-primary-dark);
      box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow);
      color: var(--color-primary-darker);
      font-variant: small-caps;

      > * {
        margin-block: 0;
      }
    }
  }

  &--secondary#{&}--has-title {
    --title-height: #{fun.convert-px(40)};

    .title {
      width: fit-content;
      height: var(--title-height);
      margin: calc(var(--title-height) * -1) auto var(--spacing-xs);
    }
  }
}