@use '/src/components/config' as *;
@use 'fonts';

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#admin-main-wrapper {
  padding: 1.5rem 1rem 0 0;
}

code {
  background: transparent;
  padding: 0;
}

p {
  font-size: 0.875rem;
  margin: 0;
}

a {
  text-decoration: none;

  &:focus {
    box-shadow: none;
    outline: none;
  }
}

// Common button style
button,
.main-btn {
  outline: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  text-align: center;
  padding: 0.5rem 1rem;
  border-radius: $border-radius-small;
  font-size: 0.875rem;
  transition: all 0.3s linear;

  &.btn-preview {
    padding: 0;
  }
}

.btn-purple {
  background: $theme-color;
  width: fit-content;
  color: $color-white;

  &:hover {
    color: $color-white;
  }
}
.btn-yellow{
  background: #d3a93a;
  color: $color-white;
}
.btn-red{
  background: #e34f4a;
  color: $color-white;
}
.btn-light-blue{
  background: #bfdeed;
  color: #003d66;
}
.btn-light-green{
  background: #b7b03c91;
}
.btn-reject{
  background-color: #e5e5e5;
}
// Button hover effect style
.btn-effect {
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    transform: perspective(0.315rem) rotateX(2deg) rotateY(2deg);
    transition: transform 0.3s;
    pointer-events: none;
  }

  &.disable {
    cursor: not-allowed;
    background-color: rgba($color: $color-active, $alpha: 0.5);
  }

  &:hover {
    &::before {
      transform: perspective(0.315rem) rotateX(0) rotateY(0);
    }
  }
}

html {
  scroll-behavior: smooth;
}

.form-group-radio-select input:checked::before {
  content: "\e809";
  color: $color-white;
  font-size: 0.813rem;
  background-color: $color-active;
  border-radius: $border-radius-small;
  font-family: "AdminLibrary" !important;
  width: 1rem;
  height: 1rem;
  margin: 0;
  line-height: 1;
}

input[type="radio"] {
  border-color: $color-active;

  &::before {
    background: $color-active;
  }
}

input[type="radio"] {
  width: fit-content !important; // To overwrite default table css only for radio input
  border-radius: 50% !important; // To overwrite default table css only for radio input
}

.admin-notice-display-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  background-color: rgba(12, 216, 12, 1);
  color: $color-white;
  max-width: 15rem;
  width: fit-content;
  padding: 0.5rem 0;
  padding: 0.5rem;
  font-weight: 400;
  position: fixed;
  top: 7.188rem;
  right: 1.512rem;
  z-index: 99999;

  &:after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 0.252rem;
    background: green;
    animation: progress 2s linear;

    @keyframes progress {
      from {
        width: 100%;
      }

      to {
        width: 0%;
      }
    }
  }
}

// pro tag common style
span.admin-pro-tag {
  font-size: 0.5rem;
  background: $accent-color;
  padding: 0.125rem 0.5rem;
  color: #F9F8FB;
  font-weight: 700;
  line-height: 1.1;
  position: absolute;
  margin-left: 0.25rem;
  border-radius: 2rem 0;
  right: 0.25rem;
  top: 0;
  transform: translateY(-50%);
  width: fit-content;
}

// admin page title common style
.admin-page-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  position: relative;
  gap: 0.5rem;
  flex-wrap: wrap;

  p {
    font-size: 1.5rem;
  }
}

// admin table filter style
.admin-table-wrapper-filter {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.875rem;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;

  &>div {
    cursor: pointer;

    &:hover {
      color: $color-active;
    }
  }
}

// tour style
.reactour__mask {
  color: #0000008a !important; // to overwrite tour style
}

.tour-box {
  h3 {
    margin-top: 0;
  }
  .tour-footer{
    display:flex;
    justify-content: end;
    gap: 0.5rem;
    flex-direction: row-reverse;
    .end-tour-btn{
      background: #522c81a6;
    }
  }
}

.reactour__popover {
  span{
   display: none; // for overwrite tour style
  }
}

// Commone loader style
.loader-wrapper {
  display: flex;
  gap: 1rem;

  .loader {
    --uib-size: 2.205rem;
    --uib-speed: 0.8s;
    --uib-color: $color-active;
    position: relative;
    display: inline-block;
    height: var(--uib-size);
    width: var(--uib-size);
    animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;

    .three-body__dot {
      position: absolute;
      height: 100%;
      width: 30%;

      &:after {
        content: "";
        position: absolute;
        height: 0%;
        width: 100%;
        padding-bottom: 100%;
        background-color: var(--uib-color);
        border-radius: 50%;
      }

      &:nth-child(1) {
        bottom: 5%;
        left: 0;
        transform: rotate(60deg);
        transform-origin: 50% 85%;

        &::after {
          bottom: 0;
          left: 0;
          animation: wobble1 var(--uib-speed) infinite ease-in-out;
          animation-delay: calc(var(--uib-speed) * -0.3);
        }
      }

      &:nth-child(2) {
        bottom: 5%;
        right: 0;
        transform: rotate(-60deg);
        transform-origin: 50% 85%;

        &::after {
          bottom: 0;
          left: 0;
          animation: wobble1 var(--uib-speed) infinite calc(var(--uib-speed) * -0.15) ease-in-out;
        }
      }

      &:nth-child(3) {
        bottom: -5%;
        left: 0;
        transform: translateX(116.666%);

        &::after {
          top: 0;
          left: 0;
          animation: wobble2 var(--uib-speed) infinite ease-in-out;
        }
      }
    }

    @keyframes spin78236 {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes wobble1 {

      0%,
      100% {
        transform: translateY(0%) scale(1);
        opacity: 1;
      }

      50% {
        transform: translateY(-66%) scale(0.65);
        opacity: 0.8;
      }
    }

    @keyframes wobble2 {

      0%,
      100% {
        transform: translateY(0%) scale(1);
        opacity: 1;
      }

      50% {
        transform: translateY(66%) scale(0.65);
        opacity: 0.8;
      }
    }
  }
}

.details-status-row {
  padding: 0.5rem 0.5rem 0.75rem;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  color: #007400;
}

.fetch-display-output {
  margin: 0.5rem 0;
  padding: 0.5rem 0.5rem;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &.failed {
    color: red;
    background: rgba(227, 79, 71, 0.1254901961);
  }

  &.success {
    color: green;
    background-color: #00800036;
  }
}

@media screen and (max-width: 49.266rem) {

  input[type=checkbox],
  input[type=radio] {
    height: 1rem;
    width: 1rem;
  }

  input[type=checkbox]:checked::before {
    margin: -0.1875rem 0 0 -0.25rem;
    height: 1.3125rem;
    width: 1.3125rem;
  }
}