@use "variables";

berta-site-media {
  display: flex;
  min-height: 100%;

  aside {
    flex-shrink: 0;
    padding-top: 0;
    width: 384px;
    border-right: 1px solid variables.$grey-10;

    .setting-group {
      h3 {
        display: block;

        a {
          text-decoration: none;
          color: variables.$black;

          &:hover,
          &.active {
            color: variables.$berta-accent;
          }
        }

        > div {
          a {
            font-size: variables.$input-font-size;
          }
        }
      }
    }
  }

  .content {
    padding: 1.3em;
    h3:first-child {
      margin-top: 0;
    }
  }
}

.entry-gallery-items {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5em;
  column-gap: 0.5em;
  margin-bottom: 1em;
}

.entry-gallery-item {
  background-color: variables.$grey-40;
  position: relative;
  width: 156px;
  height: 117px;
  text-align: center;

  .media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer;
  }

  img,
  video {
    object-fit: contain;
    width: 100%;
    height: 100%;
  }

  .action {
    display: none;
    position: absolute;
    background-color: rgba(variables.$white, 0.5);
    padding: 0.25em;

    svg {
      display: block;
    }
  }

  .delete {
    top: 0;
    right: 0;
    cursor: pointer;

    &:hover {
      svg {
        path {
          fill: variables.$error-color;
        }
      }
    }
  }

  .crop {
    top: 0;
    left: 0;
    cursor: pointer;

    &:hover {
      svg {
        path {
          fill: variables.$berta-accent;
        }
      }
    }
  }

  .reorder {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
  }

  &:hover {
    cursor: grab;

    .action {
      display: block;
    }
  }

  &.selected {
    outline: 2px solid variables.$black;
  }
}

berta-entry-gallery {
  .entry-gallery {
    margin-bottom: 2em;

    .header {
      margin-bottom: 1em;
    }

    .media {
      cursor: default;
    }
  }
}
