@import '../../styles/colors.scss';

.itemWrapper {
  position: relative;
  overflow: hidden;
  background-color: $overlay-background-color;
  border-radius: 4px;

  display: flex;
  padding: 15px;
  gap: 15px;
  flex-direction: column;

  &:only-child {
    max-width: 600px;
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    transition: opacity ease 0.2s;
    opacity: 0;
    width: 4px;
    background-color: $primary-main;
    pointer-events: none;
  }

  &:hover,
  &:focus-within {
    &::before {
      opacity: 1;
    }

    .itemActions {
      transform: translateX(0);
    }
  }
}

.insetLink {
  position: absolute;
  inset: 0;
  outline: none;
}

.itemActions {
  display: flex;
  gap: 10px;
  padding: 10px;

  > * {
    flex-grow: 1;
  }

  @media (hover: hover) {
    transition: ease 0.2s;
    transform: translateX(100%);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;

    flex-direction: column;
    background: $overlay-background-color;
    border-left: solid 1px rgba(0, 0, 0, 0.1);

    &:hover,
    &:focus-within {
      transform: translateX(0);
    }
  }

  @media (hover: none) {
    border-top: solid 1px rgba(0, 0, 0, 0.1);
    padding-top: 10px;
    margin-inline: -15px;
    margin-bottom: -15px;
  }
}

.title {
  font-size: 20px;
  color: $text-color;
}

.users {
  margin-top: auto;

  display: flex;
  grid-gap: 10px;
}

.details {
  color: rgba(0, 0, 0, 0.3);
  font-size: 14px;
}

.iconLabel {
  display: flex;
  grid-gap: 10px;
  align-items: center;
}

.status {
  display: flex;
  grid-gap: 25px;
}

a.itemWrapper:hover {
  text-decoration: none;
}
