@use './scaling';
/*
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);
*/

.info-icon {
  color: var(--thorium-text);
}

.top-edit-tag-btn {
  display: none;
}

.tags-col {
  flex: 1 0 0%;
}

.details-col {
  width: 125px;
}

.details-navitem {
  margin-right: 24px;
}

.details-navlink {
  padding: 16px;
}

.details-sha256 {
  justify-content: center;
  align-items: center;
}

.details-sha-md5 {
  justify-content: center;
  align-items: center;
}

.origin-head {
  text-align: center;
}

.sha-md5-alignment {
  display: flex;
  justify-content: center;
  text-align: center;
}

.short-origin-sha256 {
  display: none;
}

.xxl-show-row {
  display: none;
}

.short-sha256 {
  display: none;
}

.details-subtitle {
  display: none;
}

.details-tags-name {
  flex: 16;
}

.hide-sha256 {
  font-size: 100%;
}

.short-sha256 {
  font-size: 100%;
}

.origin-field-name {
  width: 145px;
}

.lg-show-row {
  display: none;
}

// 1700px
@media (max-width: scaling.$xxxl) {
  .col-resize {
    width: 120px;
  }

  .details-tags-name {
    flex: 9;
  }

  .details-sha-md5 {
    max-width: 400px;
  }

  .info-icon {
    display: none;
  }

  .edit-icon {
    flex: 0 0 0;
  }

  .left-edit-tag-btn {
    display: none;
  }

  .top-edit-tag-btn {
    display: grid;
    justify-content: left;
    padding-bottom: 1rem;
  }

  .tags-col {
    flex: 2 0 75%;
  }
}

// 1500px
//@media (max-width: scaling.$md-xxl) { ... }

// 1400px
@media (max-width: scaling.$xxl) {
  .details-tags-name {
    flex: 8;
  }

  .hide-sha256 {
    align-items: center;
    justify-content: center;
  }

  .details-circle {
    display: none;
  }
}

// 1200px
@media (max-width: scaling.$xl) {
}

// 992px
@media (max-width: scaling.$lg) {
  .lg-center-col {
    justify-content: center;
    width: 100%;
  }

  .lg-hide-col {
    display: none;
  }

  .lg-show-row {
    display: block;
  }

  .details-tags-name {
    display: flex;
    flex: 5;
    flex-wrap: wrap;
  }

  .short-sha256 {
    display: block;
    align-items: center;
    justify-content: center;
  }

  .hide-sha256 {
    display: none;
  }

  .details-sha256 {
    min-width: 600px;
  }

  .hide {
    display: none;
  }

  .short-sha256 {
    display: none;
  }

  .short-origin-sha256 {
    display: block;
  }

  .origin-sha256 {
    display: none;
  }

  .hide-sha256 {
    display: block;
  }
}

// 768px
@media (max-width: scaling.$md) {
  .details-tags-name {
    flex: 4;
  }

  .details-sha-md5 {
    display: none;
  }

  .details-sha256 {
    min-width: 300px;
  }

  .short-sha256 {
    display: block;
  }

  .hide-sha256 {
    display: none;
  }
}

// 576px
@media (max-width: scaling.$sm) {
  .col-resize {
    width: 100px;
  }
}
