.maha-attachments {
  flex: 1;
  display: flex;
  flex-direction: column;
  .reframe-stack {
    flex: 1;
    position: relative;
  }
}
.maha-attachments-summary {
  .translate-y-transition(100%, 0, .15s);
  background-color: lighten(@black, 20);
  border-top: 5px solid @white;
  z-index: 1;
}
.maha-attachments-summary-images {
  padding: 0.2em 0.2em 0 0.2em;
  overflow: hidden;
}
.maha-attachments-summary-image {
  float: left;
  position: relative;
  margin: 0.2em;
  height: 0;
  overflow: hidden;
  border-radius: 0.5em;
  background-size: cover;
  @media (max-width: 768px) {
    width: ~"calc(100% / 4 - 0.4em)";
    padding-bottom: ~"calc(100% / 4 - 0.4em)";
  }
  @media (min-width: 769px) {
    width: 100px;
    padding-bottom: 100px;
  }
  .fa-times {
    color: @white;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
  }
  img {
    width: 16px;
    height: 16px;
    position: absolute;
    bottom: 2px;
    right: 2px;
  }
}
.maha-attachments-summary-plains {
  padding: 0 0.2em 0.2em 0.2em;
}
.maha-attachments-summary-item {
  padding: 0.4em;
  border-radius: 0.5em;
  background-color: lighten(@black, 97);
  color: fadeout(@black, 50);
  display: flex;
  margin: 0.2em;
  float: left;
  .maha-asset-icon {
    flex: 0 0 1em;
    margin-right: 0.4em;
  }
  .fa-times {
    margin-left: 0.4em;
    cursor: pointer;
    color: fadeout(@black, 70);
    .hover(color, fadeout(@black, 30));
  }
}
.maha-attachments-summary-item-name {
  display: inline-block;
  font-size: 0.9em;
}
.maha-attachments-sources {
  flex: 1;
}
.maha-attachments-source {
  display: flex;
  cursor: pointer;
  border-bottom: 1px solid fadeout(@black, 95);
  &:hover {
    background-color: fadeout(@black, 97);
  }
}
.maha-attachments-source-logo {
  flex: 0 0 3em;
  display: flex;
  .fa, img {
    margin: auto;
  }
  .fa {
    font-size: 1.8em;
  }
  .fa-globe {
    color: @green;
  }
  img {
    width: 1.6em;
    height: 1.6em;
    display: block;
  }
}
.maha-attachments-source-text {
  flex: 1;
  padding: 0.8em 0.8em 0.8em 0;
}
.maha-attachments-source-count {
  flex: 0 0 1.8em;
  padding: 0.8em 0.8em 0.8em 0;
  display: flex;
}
.maha-attachments-source-count-badge {
  margin: auto;
  background-color: fadeout(@black, 90);
  color: fadeout(@black, 70);
  display: block;
  border-radius: 50%;
  text-align: center;
  font-size: .8em;
  width: 1.7em;
  height: 1.7em;
  line-height: 1.7em;
  font-weight: bold;
}
.maha-attachments-source-proceed {
  flex: 0 0 1.8em;
  padding: 0.8em 0.8em 0.8em 0;
  display: flex;
  i {
    color: fadeout(@black, 80);
    margin: auto;
  }
}
.maha-attachments-main {
  flex: 1;
  display: flex;
}
.maha-attachments-photos {
  padding: 0.2em;
  overflow: hidden;
}
.maha-attachments-photo {
  position: relative;
  float: left;
  height: 0;
  overflow: hidden;
  cursor: pointer;
  background-size: cover;
  overflow: hidden;
  margin: 0.2em;
  display: flex;
  @media (max-width: 768px) {
    width: ~"calc(100% / 3 - 0.4em)";
    padding-bottom: ~"calc(100% / 3 - 0.4em)";
  }
  @media (min-width: 769px) {
    width: ~"calc(100% / 5 - 0.4em)";
    padding-bottom: ~"calc(100% / 5 - 0.4em)";
  }
  .maha-attachments-photo-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
  }
  i {
    margin: auto;
    font-size: 2em;
    background-color: fadeout(@black, 97);
    color: @white;
  }
}

@import './device/style';
@import './drive/style';
@import './url/style';