@use 'variables';
.kodeala-smarttag-buttons{
  button{
    margin:0 5px 10px 0;
    border:1px solid $primary-color;
    background:$white;
    border-radius: 5px;
    padding:5px 10px;
    font-size: 16px;
    cursor: pointer;
    color:$primary-color;
    transition: all .3s ease-in-out;
    &.active,
    &:hover{
      background:$primary-color;
      color:$white;
    }
  }
}
#kodeala-smarttag-wrapper{
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  gap: 35px;
  *{
    transition: all .3s ease-in-out;
  }
  #kodeala-image-list{
    flex: 1 1 auto;
    #kodeala-image-search-container{
      text-align: right;
      #kodeala-image-search{
        color:$primary-color;
        border:1px solid $primary-color;
      }
    }
    #kodeala-image-results{
      padding-top:25px;
      .smarttag-body{
        border:1px solid rgba($black, .1);
        margin-bottom:15px;
        background:$white;
        border-radius: 5px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        grid-template-columns: 200px auto;
        padding:10px;
        .smarttag-img-column{
          grid-area: 1 / 1 / 2 / 2;
          text-align: center;
          img{
            border-radius: 5px;
            border:1px solid rgba($black, .1);
            width:100%;
            height:200px;
            object-fit: cover;
            object-position: center;
            background: linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(221,221,221,1) 100%);
          }
          .smarttag-notfound{
            border:1px solid #880e0e;
            margin: 10px auto auto;
            border-radius: 5px;
            padding: 5px 10px;
            font-size: 16px;
            color: #880e0e;
            display:inline-block;
          }
          .smarttag-bttn{
            margin: 10px auto auto;
            border: 1px solid $primary-color;
            background: #fff;
            border-radius: 5px;
            padding: 5px 10px;
            font-size: 16px;
            cursor: pointer;
            color: $primary-color;
            &:hover{
              background: $primary-color;
              color:$white;
            }
          }
        }
        .smarttag-details-column{
          grid-area: 1 / 2 / 2 / 3;
          .smarttag-details-filename{
            font-size:14px;
            font-weight:bold;
            padding-bottom:5px;
            margin-bottom:5px;
            border-bottom:1px solid rgba($black, .1);
          }
          .smarttag-body-textarea{
            position:relative;
            padding:10px 0;
            label{
              position: absolute;
              background:$white;
              margin-top:-9px;
              margin-left:10px;
              padding:0 10px;
              display:inline-block;
            }
            textarea{
              border:1px solid rgba($black, .2);
              resize:none;
              width:100%;
              padding:10px 45px 10px 10px;
            }
            .generate-bttn{
              border:0;
              padding:5px 10px;
              background:none;
              position: absolute;
              right:0;
              bottom:14px;
              opacity: .75;
              cursor: pointer;
              svg{
                width:20px;
                height:20px;
                path{
                  fill:$primary-color;
                }
              }
            }
          }
        }
        .smarttag-body-sub{
          grid-area: 2 / 1 / 3 / 3;
          > div{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            div{
              padding:5px;
            }
            &.smarttag-head-child{
              background:$primary-color;
              color:$white;
              font-weight:bold;
            }
            &.smarttag-body-child{
              border-bottom: 1px solid rgba(0, 0, 0, .1);
            }
          }
        }
      }
    }
  }
  #kodeala-sidebar{
    flex: 0 1 auto;
    background:$primary-color;
    padding:25px;
    .kodeala-sidebar-container{
      position: sticky;
      top:40px;
      h2{
        font-size:20px;
        color:$white;
        font-weight:300;
      }
      button{
        width: 185px;
        background:$white;
        border:0;
        border-radius: 5px;
        cursor:pointer;
        margin-bottom:10px;
        color:$primary-color;
        font-size:16px;
        padding:0;
        text-align: left;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: 8px;
        overflow:hidden;
        box-shadow: 0 0 5px 0 rgba(0,0,0,.05);
        &:hover{
          opacity: .95;
        }
        svg{
          padding: 10px;
          background:rgba($black, .05);
          border-right:1px solid rgba($primary-color, .05);
          path{
            fill:$primary-color;
          }
        }
      }
    }
  }
}
.no-results{
  padding:20px;
  color: #880e0e;
  text-align: center;
  font-size:16px;
}
.image-list-footer{
  background:rgba(240, 240, 240,.75);
  backdrop-filter: blur(10px);
  position: sticky;
  bottom: 0;
  padding:20px 0;
  border-top:1px solid rgba($black, .05);
}
#smarttag-settings-form{
  table{
    width:100%;
    margin:20px 0;
    tr{
      > td:first-child{
        width:150px;
      }
    }
    input[type="text"]{
      width:100%;
    }
  }
  details{
    background:$white;
    border:1px solid rgba($black, .2);
    border-radius: 5px;
    summary{
      padding:10px;
      cursor: pointer;
    }
    div{
      padding:0 10px 10px;
    }
  }
}
.smarttag-save-message{
   padding:10px 0;
   color:$primary-color;
   display:none;
}
#kodeala-save-status{
  display:inline-block;
  margin-left:15px;
  color:$primary-color;
  p{
    margin:0;
  }
}