@use "../utils/mixins";
@use "../utils/variables";

.files-list {
    a.active {
      background: variables.$primary-100;
    }
}
.files-list {
    a {
        @include mixins.rounded(5px);
        &:hover, &.active {
            background: variables.$primary-100;
            color: variables.$gray-900 !important;
        }
    }
}
.social-gallery-slider,.email-attach {
    a {
        position: relative;
        transition: 0.5s all;
        span {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translatex(-50%);
        transition: 0.5s all;
        background: variables.$white;
        opacity: 0;
        i {
            color: variables.$dark;
            opacity: 1;
        }
        }
        &:hover {
        transition: 0.5s all;
        span {
            top: 50%;
            transform: translate(-50%,-50%);
            transition: 0.5s all;
            opacity: 0.5;
            
        }
        &::before {
            content: "";
            width: 100%;
            height: 100%;
            border-radius: 5px;
            background: variables.$gray-900;
            opacity: 0.8;
            position: absolute;
            transition: 0.5s all;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }
        }
        img {
        transition: 0.5s all;
        }
    }
}
.post-textarea {
    padding-top: 60px;
    padding-left: 68px;
}
.text-area-avatar {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
}
.template-more-links {
    a {
      position: relative;
      & + a {
        margin-left: 10px;
        padding-left: 10px;
        &::before {
          content: "/";
          position: absolute;
          left: -2px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
}
.custom-nav {
    display: flex;
    align-items: center;
    button {
      width: 16px;
      height: 16px;
      background: variables.$white;
      border: 0;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      &:hover {
        background: variables.$dark;
        color: variables.$white;
      }
    }
}
.fs-5 {
    font-size: 5px !important;
}
.fs-6 {
    font-size: 6px !important;
}
.btn.btn-icon:hover {
    background: variables.$light;
    color: variables.$dark;
}
.kanban-drag-wrap {
    min-width: 260px;
    min-height: 50px;
}
.dropdown-toggle.btn.btn-white.text-dark {
    color: variables.$dark !important;
}
.bg-transparent-secondary {
    background: #EDF2F4;
}
.input-icon-addon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    pointer-events: none;
    font-size: variables.$font-size-12;
    color: variables.$gray-300;
    z-index: 9;
    &:last-child {
      right: 0;
      left: auto;
    }
    .spinner-border-sm {
      border-width: 1px;
    }
}
.input-icon .form-control {
    padding-left: 30px;
}
.input-icon-start .form-control {
    padding-left: 30px;
}
.bg-soft-skyblue {
    background: #D3F5FC;
}
.bg-soft-pink {
    background: #FFDBEC;
    color: #FD3995;
}
.bg-skyblue {
    background-color: #0DCAF0 !important;
}
.project-status {
    .dropdown {
        a {
            border: 0;
        }
    }
}