@import 'tailwindcss';

.navbar {
  padding: 2em;
  border-bottom: 1px solid #e6e6e6;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  a {
    font-size: 1.5em;
  }

  button {
    margin: 0 0.5em;
    border-radius: 25px;
    padding: 0.25em;
    cursor: pointer;

    &.active,
    &:hover {
      background: #e6e6e6;
    }
  }
}

body,
#root {
  min-height: 100vh;
  background-color: oklch(98.5% 0 0) !important;
}

#root {
  display: flex;
  flex-direction: column;
}

.container {
  flex: 1;
  margin: 1.5em auto;
  display: flex;
  flex-direction: column;
}

.artifact {
  transition:
    opacity 300ms ease,
    transform 300ms ease;
}

.artifact.delete {
  opacity: 0.4;
  transform: scale(0.95);
}

h1 {
  font-size: 3em;
}

h2 {
  font-size: 2.5em;
}

h3 {
  font-size: 1em;
  font-weight: bold;
}

input[type='text'],
input[type='search'],
select {
  flex: 1;
  border: 1px solid #e6e6e6;
  border-radius: 15px;
  padding: 0.5em;
  width: 100%;
}

.filters {
  display: flex;
  flex-direction: column;
  gap: 1em;

  input[type='checkbox'] {
    height: 25px;
    width: 25px;
    background-color: #eee;
    vertical-align: middle;
    margin-bottom: 1em;
  }

  div {
    display: flex;

    label {
      flex: 1;
    }

    align-items: center;
  }
}

.artifacts {
  display: grid;
  gap: 1.5em;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 28rem);
}

.artifact {
  width: 28rem;
  border: 1px solid #e6e6e6;
  border-radius: 15px;
  background-color: #fff;
  display: flex;
  gap: 1em;

  img {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    height: 10rem;
    width: 10rem;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: start;

    .lucide {
      width: 14px;
      cursor: pointer;
    }

    p {
      font-size: small;
      color: #73716b;
    }
  }

  .status {
    z-index: 20;
    position: absolute;
    background-color: #262626;
    color: #fff;
    padding: 0.25em;
    font-size: x-small;
    width: 10rem;
    border-top-left-radius: 15px;
    text-align: center;
  }

  .metadata {
    display: flex;
    flex-direction: column;
    margin-right: 0.5em;

    & > p {
      flex: 1;
      margin-top: 0.5em;
    }

    .footer {
      font-size: smaller;
      display: flex;
      justify-content: space-between;
      color: #73716b;

      div {
        display: flex;
        align-items: center;

        .lucide {
          width: 10px;
          margin-right: 0.2em;
        }
      }
    }
  }

  p {
    font-size: small;
  }
}

.artifacts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  button {
    display: flex;
    background-color: #262626;
    color: #fff;
    padding: 0.5em;
    border-radius: 15px;
    cursor: pointer;
  }
}

.artifact-detail {
  display: flex;
  width: unset;
  border: 1px solid #e6e6e6;
  border-radius: 15px;
  background-color: #fff;
  gap: 1em;

  img {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    height: 25rem;
    width: 25rem;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: start;

    .lucide {
      width: 14px;
      cursor: pointer;
    }

    p {
      font-size: small;
      color: #73716b;
    }
  }

  .status {
    z-index: 20;
    position: absolute;
    background-color: #262626;
    color: #fff;
    padding: 0.25em;
    font-size: x-small;
    width: 25rem;
    border-top-left-radius: 15px;
    text-align: center;
  }

  .metadata {
    display: flex;
    width: 100%;
    flex-direction: column;
    margin-right: 0.5em;

    & > .detail-content {
      flex: 1;
      margin-top: 0.5em;

      p {
        margin-bottom: 0.5em;
      }
    }

    .footer {
      font-size: smaller;
      display: flex;
      justify-content: space-between;
      color: #73716b;

      div {
        display: flex;
        align-items: center;

        .lucide {
          width: 10px;
          margin-right: 0.2em;
        }
      }
    }
  }

  p {
    font-size: small;
  }

  .navigation-footer {
    background-color: #262626;
    color: #fff;
    margin-left: -1em;
    margin-right: -.5em;
    border-bottom-right-radius: 15px;
    cursor: pointer;
    text-align: center;

    button {
      width: 100%;
      cursor: pointer;
    }
  }
}
