@use "../variables" as *;
@use "../mixins" as *;
@use "../utils" as *;

.mie.message {
  // prettier-ignore
  background-image:
    linear-gradient(
        mvar("message.overlay"),
        mvar("message.overlay")
    ),
    linear-gradient(
        mvar("message.bg"),
        mvar("message.bg")
    );

  border: 0.1rem solid mvar("message.shade");
  border-radius: mvar("message.rounded");
  @include flex(row, none, start);

  margin: mvar("message.margin.v") 0;
  padding: mvar("message.padding");

  > .content {
    @include flex(column, center, flex-start);
    height: 100%;
    flex: 1;

    > .title {
      font-size: mvar("message.title.fs");
      color: mvar("message.title.fg");
      font-weight: 700;
    }

    > .description {
      margin-top: mvar("message.title.space");

      font-size: mvar("message.description.fs");
      color: mvar("message.description.fg");
      font-weight: 400;
    }
  }

  > .icon {
    margin-right: mvar("message.icon.space");

    .mie.icon {
      --mie-icon-fg: #{mvar("message.title.fg")};
    }
  }

  > .mie.button.close {
    margin-left: mvar("message.icon.space");

    .mie.icon {
      --mie-icon-fg: #{mvar("message.description.fg")};
    }
  }
}
