@use 'sass:color';
@import 'variables';

html, body {
  font-size: 14px;
}

.b-form-group {
  margin-bottom: 1rem;
}

.text-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.text-pre {
  white-space: pre-line;
}

.modal-footer {
  justify-content: space-between;
}

.ratio {
  &.rounded {
    > img, div {
      border-radius: inherit;
    }

    > img {
      object-fit: cover;
    }
  }
}

.upload-box {
  overflow: hidden;
  position: relative;
  background: var(--bs-tertiary-bg) url('~/assets/icons/upload.svg') no-repeat center;
  background-size: 1.5rem;
  border: 1px solid var(--bs-border-color);
  transition: background $transition-speed;
  cursor: pointer;
  min-height: 6rem;
  border-radius: var(--bs-border-radius);

  & > img {
    object-fit: cover;
    object-position: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  &.uploading {
    background-image: none;
  }

  &:hover {
    background-color: var(--bs-secondary-bg);
    background-size: 2rem;
  }

  &::after {
    content: '';
    background-color: rgba($success, 0.25);
    opacity: 0;
    transition: opacity $transition-speed;
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  &.drag-over {
    background-color: transparent;

    &::after {
      opacity: 1;
    }
  }

  .upload-items {
    display: flex;
    flex-flow: column nowrap;
    gap: 0.5rem;
  }
}

#navbar {
  z-index: $zindex-modal-backdrop;
}

#navbar, #footer {
  transition: all $transition-speed;
  background-color: var(--bs-secondary-bg);

  .pages {
    .nav-link {
      color: var(--bs-secondary-color);

      &:not(.active):hover {
        color: var(--bs-tertiary-color);
      }

      &.active {
        color: var(--bs-tertiary-color);
      }
    }
  }
}

#footer {
  @include media-breakpoint-down(md) {
    .pages {
      justify-content: center;
    }
  }
}

#layout {
  &.columns {
    background-color: var(--bs-secondary-bg);

    #navbar, #footer {
      background-color: var(--bs-body-bg);
    }
  }

  .main-background {
    position: relative;
    transition: height $transition-speed;
    height: 0;
    overflow: hidden;

    img {
      height: 240px;
      width: 100%;
      object-fit: cover;
    }

    &::before {
      background-color: rgb(0 0 0 / 20%);
      content: "";
      height: 100%;
      position: absolute;
      width: 100%;
    }
  }

  .main-columns {
    position: relative;

    .offset {
      position: relative;
      display: flex;
      flex-direction: column;
      margin-top: 0;
      transition: margin-top $transition-speed;
    }

    .column {
      background: var(--bs-body-bg);
      border: 1px solid var(--bs-border-color);
      border-radius: var(--bs-border-radius);
      padding: 1rem;

      & > .widget {
        margin-top: 0;
      }
    }
  }

  &.main-page {
    .main-background {
      height: 240px;
    }

    .main-columns {
      .offset {
        margin-top: -200px;
      }
    }
  }
}

#sidebar {
  padding-top: 4rem;
}

footer {
  a {
    color: inherit;
  }
}

.table-responsive {
  border-radius: var(--bs-border-radius);
}

// Glightbox
body.glightbox-open {
  overflow: visible;
}

.goverlay {
  background: rgba(var(--bs-dark-rgb), 0.85) !important;
}