/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #e3f2fd;
}

.container{
    width: 850px;
    background: #fff;
    /* box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color] [inset];
 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 30px 35px 35px;
}

/* The code uses the :where() selector, which acts as a logical OR operator for multiple selectors. It allows you to target elements that match any of the specified selectors inside the parentheses-->().

The .container.disable selector selects elements with both the classes "container" and "disable". These are the elements to which the styles will be applied.

Inside the :where() selector, the .editor-pannel, .reset-filter, and .save-img selectors are listed, separated by commas. This means that if any element within the selected .container.disable elements matches any of these selectors, the styles inside the rule will be applied.

The styles inside the curly braces {} are applied to the selected elements. In this case, the opacity property is set to 0.6, which makes the elements partially transparent, giving them a lower opacity. The pointer-events property is set to none, which means that no mouse events (like clicks or hover) will be registered on these elements. */


.container.disable :where(.editor-pannel, .reset-filter, .save-img, .Remove-bg){
    opacity: 0.6;
    pointer-events: none;
}

.container h2{
    font-size: 22px;
    font-weight: 500;
}

.container .wrapper{
    display: flex;
    margin: 20px 0;
min-height: 335px;
}

.wrapper .editor-pannel{
    width: 280px;
    padding: 15px 20px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.editor-pannel .title{
    display: block;
    font-size: 16px;
    margin-bottom: 12px;
}

.editor-pannel .options, .controls{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.editor-pannel button{
    height: 40px;
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 8px;
    border-radius: 3px;
    background-color: #fff;
    border: 1px solid #aaa;
}

.editor-pannel button:hover{
    background-color: #f5f5f5;
}

.editor-pannel .filter button{
    width: calc(100% / 2 - 4px);
}

.filter button.active{
    color: #fff;
    background: #5372f0;
    background-color: #5372f0;
}

.filter .slider{
    margin-top: 12px;
}

.filter .slider .filter-info{
    display: flex;
    color: #464646;
    font-size: 14px;   
    justify-content: space-between;
}

.filter .slider input{
    width: 100%;
    height: 50px;
    accent-color: #5372f0;
} 

.editor-pannel .rotate{
    margin-top: 17px;
}

.editor-pannel .rotate button{
    width: calc(100% / 4 - 3px);
}

.rotate button:nth-child(3),
.rotate button:nth-child(4){
    font-size: 18px;
}

.wrapper .preview-img{
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    overflow: hidden;
}
.preview-img.border{
    border: 2px dashed #5372f0;
}

.preview-img img{

    /* If we dont give the max height and width then the image will grow and shrink as per the container height and width */

    max-width: 490px;
    max-height: 335px;
    width: 100%;
    height: 100%;

    /* In simple terms, cover tries to make the image fill the container entirely, even if it means cutting off parts of the image. On the other hand, contain tries to fit the entire image within the container, leaving empty spaces if needed to keep the image's proportions intact.

    Think of it like adjusting a photo in a frame: cover would stretch or crop the photo to fill the frame entirely, while contain would fit the entire photo inside the frame, even if it means leaving empty spaces around it. */

    object-fit: contain;
    border-radius: 5px;
}

.controls button{
    padding: 11px 20px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
    background: #fff;
    text-transform: uppercase;
}

.controls .reset-filter{
    color: #6c7570;
    border: 1px solid #6c7570;
}
.controls .choose-img{
    background: #6c7570;
    border: 1px solid #6c7570;
}
.controls .save-img{
    /* margin-left: 5px; */
    background: #5372f0;
    border: 1px solid #5372f0;
}

.controls .Remove-bg{
    background: #6c7570;
    border: 1px solid #6c7570;
}

/* ------------------------Media Query-------------------------- */
@media screen and (max-width: 760px) {
    .container{
      padding: 25px;
    }
    .container .wrapper{
      flex-wrap: wrap-reverse;
      /* We can also write :  flex-direction: column-reverse; */
    }
    .wrapper .editor-panel{
      width: 100%;
    }
    .wrapper .preview-img{
      width: 100%;
      margin: 0 0 15px;
    }
    .wrapper .editor-pannel {
        margin: 0 auto;
        width: 90%;
    }
  }
  @media screen and (max-width: 500px) {
    .controls button{
      width: 100%;
      margin-bottom: 10px;
    }
    .controls .row{
      width: 100%;
    }
    .controls .row .save-img{
      margin-left: 0px;
    }
  }