.show-ai-content-drawer-btn {
padding: 10px 15px 10px 10px;
border-radius: 25px;
background-color: #f1f1f1;
cursor: pointer;
@media (max-width: $screen-xs-max) {
padding: 5px;
}
}
.ai-content-generator-drawer {
position: fixed;
height: 100vh;
width: 46.3vw;
top: 0;
bottom: 0;
right: -110%;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
transition: all 0.4s cubic-bezier(0.43, 0.83, 0.54, 1.02), opacity .4s linear;
z-index: 1506;
&-header {
height: 68px;
border-bottom: 1px solid #f1f1f1;
}
&-mask {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.25);
z-index: 1505;
}
&.show {
right: 0;
}
&.show ~ &-mask {
display: block;
}
.rtl & {
right: auto;
left: -110%;
&.show {
right: auto;
left: 0;
}
}
.drawer-content {
height: calc(100vh - 68px);
overflow-y: auto;
}
@media (max-width: $screen-sm-max) {
width: 100vw;
}
}
.image-generated-card {
width: 256px;
height: 256px;
border-radius: 10px;
margin: 15px 15px 0 0;
}