@import "../../../responsive";

.dashboard-container {
  display: flex;
  gap: 1rem;
  margin: auto;
  padding: 1.5rem 1.5rem 0 1.5rem;
  width: 1280px;
  height: 840px;

  @include width-small {
    width: 1494px;
  }
  @include width-medium {
    width: 1707px;
  }

  // Width large is probably too large
  // @include width-large {
  //   width: 1920px;
  // }
  @include height-small {
    height: 910px;
  }
  @include height-medium {
    height: 977px;
  }
  @include height-large {
    height: 1056px;
  }
}

.attribute-skill-container {
  display: flex;
  gap: 1rem;

  .save-skills-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}

.info-tabels-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tables {
  display: flex;
  gap: 1rem;
}

.life-weapon-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 388px;

  @include width-small {
    width: 500px;
  }
  @include width-medium {
    width: 600px;
  }
}

ability-panel {
  width: 391px;
  height: 702px;

  @include width-small {
    width: 495px;
  }

  @include width-medium {
    width: 609px;
  }

  @include height-small {
    height: 772px;
  }
  @include height-medium {
    height: 839px;
  }
  @include height-large {
    height: 917px;
  }
}

weapons-container {
  width: 100%;
  height: 515px;

  @include height-small {
    height: 585px;
  }
  @include height-medium {
    height: 652px;
  }
  @include height-large {
    height: 730px;
  }
}