$break_phones: 900px;
$break_ss_screen: 1080px;
$break_s_screen: 1400px;

.marketplace {
   $left_width: 150px;
   text-align: left;
   display: flex;
   background-color: #EEE;
   padding: 10px;
   margin: 0 -10px;

   @media screen and (max-width: $break_phones) {
      display: block;
   }

   .left-panel {
      width: $left_width;

      @media screen and (max-width: $break_phones) {
         width: initial;
      }

      .plugins-tags {
         vertical-align: top;
         display: inline-block;
         width: 100%;
         font-size: 1.1em;

         @media screen and (max-width: $break_phones) {
            display: flex;
            flex-wrap: wrap;
            margin: 0 0 10px 10px;
         }

         .tag {
            background: #FFF;
            border-radius: 3px;
            border: 1px solid #dddddd;
            padding: 5px;
            margin: 0 3px 3px 0;
            text-align: center;
            cursor: pointer;

            &:hover {
               background: #d1d1d1;
            }

            &.active {
               background: #747474;
               color: #FFF;
               border-color: transparent;
            }
         }
      }
   }

   .right-panel {
      padding-left: 5px;
      width: 100%;

      .left-panel+& {
        width: calc(100% - #{$left_width});
      }

      .top-panel {
         display: flex;

         .filter-list {
            flex: 1;
            margin: 0 8px 5px 5px;
            height: 25px;
         }

         .controls {
            width: 170px;

            .select2 {
               .select2-selection.select2-selection--single {
                  height: 25px;
                  text-overflow: clip;
                  text-overflow: unset;
                  padding-left: 0;
               }
               .select2-selection.select2-selection--single:before {
                  content: '';
               }
            }

            i {
               vertical-align: middle;
               cursor: pointer;
            }
         }
      }

      .plugins {
         display: flex;
         flex-wrap: wrap;
         position: relative;

         @media screen and (max-width: $break_phones) {
            flex-direction: column;
         }

         .loading-plugins {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
            background-color: rgba(0, 0, 0, 0.5);

            i.fas {
               position: absolute;
               top: 50%;
               left: calc(50% - 1.5rem);
               color: white;
               font-size: 3rem;
            }
         }

         .plugin {
            $margin_width: 10px;
            width: calc(25% - #{$margin_width}); //minus margin
            margin: calc(#{$margin_width} / 2);
            margin-bottom: 10px;
            border-radius: 3px;
            background-color: #FFF;
            border: 1px solid #c2c2c2;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: space-between;
            box-sizing: border-box;

            @media screen and (max-width: $break_s_screen) {
               width: calc(33% - #{$margin_width});
            }

            @media screen and (max-width: $break_ss_screen) {
               width: calc(50% - #{$margin_width});
            }

            @media screen and (max-width: $break_phones) {
               width: calc(100% - #{$margin_width});
            }

            .main {
               display: flex;
               padding-bottom: 5px;

               .icon {
                  flex-shrink: 0;
                  padding: 5px;
                  width: 70px;

                  img {
                     object-fit: contain;
                     max-width: 50px;
                     max-height: 50px;
                     margin: 2px 10px;
                  }

                  .icon-text {
                     display: block;
                     margin-top: 2px;
                     text-align: center;
                     width: 50px;
                     height: 50px;
                     line-height: 50px;
                     font-size: 1.4em;
                     font-weight: bold;
                     text-transform: uppercase;
                     margin: 2px 10px;
                  }
               }

               .details {
                  padding: 5px 10px;

                  .title {
                     margin: 2px 0 5px;
                     font-size: 1.25em;
                  }

                  .offers {
                     .badge {
                        margin: 1px;
                        padding: 2px 5px;
                        border-radius: 3px;
                        background-color: #d1d1d1;
                        border: 1px solid #5a5a5a;
                        color: #202020;
                        font-weight: bold;

                        &.glpi-network {
                           background-color: #ffd45f;
                           color: #352804;
                           border-color: #c69100;
                        }

                        i {
                           font-size: 10px;
                           margin: 1px 3px 0 0;
                           vertical-align: top;
                           color: rgba(0, 0, 0, .5);
                        }
                     }
                  }

                  .description {
                     margin: 5px 0;
                  }
               }

               .buttons {
                  width: 25px;
                  padding: 5px;
                  margin-left: auto;

                  button {
                     background-color: #FAFAFA;
                     border: 1px solid #dddddd;
                     cursor: pointer;
                     width: 25px;
                     padding: 3px 5px;
                     margin: 1px;

                     &:hover {
                        background-color: #dddddd;
                     }

                     i {
                        color: #666;
                     }

                     &[data-action="disable_plugin"] {
                        i {
                           color: #6ebb43;
                        }
                     }

                     &[data-action="download_plugin"]:hover,
                     &[data-action="install_plugin"]:hover,
                     &[data-action="enable_plugin"]:hover {
                        background-color: rgb(226, 247, 226);
                        border-color: rgb(91, 150, 91);
                        i {
                           color: rgb(74, 121, 74);
                        }
                     }

                     &[data-action="uninstall_plugin"]:hover,
                     &[data-action="disable_plugin"]:hover {
                        background-color: rgb(245, 199, 199);
                        border-color: rgb(190, 83, 83);
                        i {
                           color: rgb(105, 60, 60);
                        }
                     }

                     &.download_manually,
                     &.need_offers {
                        background-color: rgb(253, 240, 215);
                        border-color: rgb(221, 188, 125);
                        i {
                           color: #8f5a0a;
                        }

                        &:hover {
                           background-color: rgb(253, 227, 179);
                           border-color: rgb(97, 82, 54);

                           i {
                              color: rgb(97, 82, 54);
                           }
                        }
                     }
                  }

                  progress {
                     -webkit-appearance: none;
                     appearance: none;
                     border: none;
                     width: 25px;
                     height: 5px;

                     &::-webkit-progress-bar {
                        background: transparent;
                        border: 1px solid #c2c2c2;
                     }
                  }

                  .plugin-error {
                     color: red;
                     margin: 1px;
                     padding: 3px 5px;
                  }
               }
            }

            .footer {
               background-color: #FAFAFA;
               border-top: 1px solid rgb(221, 221, 221);
               display: flex;
               align-items: stretch;
               justify-content: space-between;
               padding: 5px;
               color: #666;

               .misc-left {
                  .note {
                     width: 85px;

                     i.fas, i.far {
                        color: #ffbb00;
                     }
                  }

                  .links {
                     a {
                        i {
                           color: #999;

                           &:hover {
                              color: #000;
                           }
                        }
                     }
                  }
               }

               .misc-right {
                  width: calc(100% - 85px);
                  text-align: left;

                  i {
                     margin-right: 5px;
                  }

                  .authors {
                     overflow: hidden;
                     text-overflow: ellipsis;
                     white-space: nowrap;
                  }

               }
            }

            .misc-right {
               i {
                  margin-right: 5px;
               }

               .authors {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
               }

               .license, .authors {
                  a {
                     font-size: 12px;
                  }
               }
            }
         }
      }

      .pagination {
         width: 100%;
         display: flex;
         justify-content: center;

         li {
            padding: 8px 16px;
            transition: background-color .1s;
            border: 1px solid #c2c2c2;
            background-color: white;

            &.current {
               background-color: #979797;
               border-color: #979797;
               color: white;
               font-weight: bold;

               & + li {
                  border-left-width: 0;
               }
            }

            &.nav-disabled {
               color: #c2c2c2;
            }

            &.nb_plugin {
               border: none;
               background-color: transparent;
            }

            &.dots {
               padding: 8px 10px;
            }

            &:not(.current):not(.nb_plugin):not(.nav-disabled):hover {
               background-color: #ddd;
               cursor: pointer;
            }

            &:first-child {
               border-top-left-radius: 3px;
               border-bottom-left-radius: 3px;
            }

            &:last-child {
               border-top-right-radius: 3px;
               border-bottom-right-radius: 3px;
            }

            &:not(:first-child) {
               border-left-width: 0;
            }
         }
      }

      .network-mail {
         display: inline-block;
         margin: 20px 10px;
      }
   }

   &.installed {
      .plugins {
         .plugin {
            min-height: 84px;
            margin-bottom: 5px;

            .main {
               height: 100%;

               .details {
                  flex: 1;
                  border-right: 1px solid #DDD;
                  padding: 5px 0 0 10px;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  overflow: hidden;
                  text-overflow: ellipsis;

                  .misc-right {
                     color: #8f8f8f;
                  }
               }

               .buttons {
                  width: 26px;
                  padding: 4px 5px;
               }
            }

            .footer {
               background: none;
               border: none;
               margin: -25px 36px 0 0;

               .misc-left {
                  margin-left: 15px;
               }
            }
         }
      }
   }
}