@import "variables";
@import "mixins";

$down-gtc: repeat(3, 1fr) !default;
$down-gtc-m: repeat(1, 1fr) !default;
$down-gg: 3rem !default;
$down-br: 16px !default;
$down-bw: 0px !default;
$down-pd: 15px 20px !default;
$down-bs: 0px 4px 20px 0px #00000014 !default;
$down-ih: 5rem !default;

section.downloads-filter {
  margin: $space-md 0;
}

.downloads-search-bar {
  .switch-buttons-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    .switch-button {
      cursor: pointer;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      transition: $trans;
      &.active,
      &:hover {
        color: $col-prm;
        transition: $trans-h;
      }
      img {
        max-height: $down-ih;
        margin-bottom: $space-xs;
      }
    }
  }
  .input-search {
    display: block;
    width: 650px;
    max-width: 100%;
    margin: $space-md auto;
  }
}

.downloads-wrap {
  display: grid;
  grid-template-columns: $down-gtc;
  grid-template-rows: 1fr;
  grid-column-gap: $down-gg;
  grid-row-gap: $down-gg;
  margin: 0 0 $space-lg;
  @include bp("md") {
    grid-template-columns: $down-gtc-m;
  }
  .download-card {
    border: $down-bw solid $gray100;
    border-radius: $down-br;
    box-shadow: $down-bs;
    padding: $down-pd;
    display: flex;
    flex-wrap: wrap;
    .info {
      flex: 1 0 75%;
      max-width: 75%;
      display: flex;
      .thumb {
        margin-right: 1.8rem;
        .extension {
          font-family: $font-family;
          font-weight: $fw-bold;
          font-size: $fs-small;
          text-transform: uppercase;
          fill: $white;
        }
      }
      .cats {
        & > *:not(:last-child)::after {
          content: ", ";
        }
      }
    }
    .size {
      flex: 1 0 25%;
      max-width: 25%;
      text-align: right;
    }
    .actions {
      flex: 1 0 100%;
      max-width: 100%;
      align-self: flex-end;
      margin-top: 4rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
  }
}
