/**
 * @date: 2024/1/18
 * @author: 小红
 * @fileName: main
 * @Description: main
 */
@use "util";

.main {
  @import "aside";

  @include util.useThemeVar((
    card-background-color: (rgba(255, 255, 255, 1), rgba(40, 47, 62, 0.9)),
  ));


  & {
    width: 100%;
    display: flex;
    margin: 0 auto;
    max-width: 1250px;
    padding: 28px 15px;
    flex-direction: row;
  }

  .card {
    background-color: var(--card-background-color);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-box-shadow);
    transition: transform .25s, box-shadow .25s;

    &:hover {
      box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.09);
    }
  }


  > .content {
    width: 100%;
    align-self: flex-start;
    padding: 1.5rem;

    @include util.useResponsive($width: util.$w-md) {
      padding: 1.2rem .8rem;
    }
  }

  > .aside {
    width: 25%;
    align-self: flex-start;
  }

  &.off-aside > .content {
    width: 100%;
  }

  &.aside-left {
    flex-direction: row-reverse;

    > .content {
      width: 74%;
    }
  }

  &.aside-right {
    flex-direction: row;

    > .content {
      width: 74%;
    }
  }

  &:is(.aside-left) .aside {
    margin-right: 18px;
  }

  &:is(.aside-right) .aside {
    margin-left: 18px;
  }


  @include util.useResponsive(1100px, '# &') {
    flex-direction: column;
    > .content {
      width: 100%;
    }
    > .aside {
      width: 100%;
      margin: 20px 0 0;
    }
  }

  @include util.useResponsive(util.$w-md) {
    padding: 18px 8px;
  }

  @include util.useResponsive($width: 2000px, $size: min) {
    max-width: 60%;
  }

}