@import '../../styles/common';

// translate-offset equals handle-width - padding
$resource-list-item-variables: (
  padding: rem(12px),
  control-indent: -1 * rem(12px),
  min-height: rem(44px),
  handle-width: rem(48px),
  disclosure-width: rem(48px),
  translate-offset: rem(48px) - rem(12px) + spacing(extra-tight),
  clickable-stacking-order: 1,
  content-stacking-order: 2,
  actions-height: rem(56px),
  breakpoint-small: 458px,
);

@function resource-list-item($variable) {
  @return map-get($resource-list-item-variables, $variable);
}

@mixin action-hide {
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
}

@mixin action-unhide {
  clip: auto;
  overflow: visible;
  height: 100%;
}

.CheckboxWrapper {
  display: flex;
}

.ResourceItem {
  position: relative;
  outline: none;
  cursor: pointer;

  &:hover {
    @include state(hover);

    &:not(.persistActions) {
      // stylelint-disable-next-line selector-max-specificity
      .Actions {
        @include action-unhide;
        right: spacing();

        // stylelint-disable-next-line max-nesting-depth
        @include page-content-when-partially-condensed {
          display: none;
        }
      }
    }
  }

  &:active {
    @include state(active);
  }
}

.selected {
  @include state(selected);

  &.focused {
    @include state(selected, focused);

    &:hover {
      @include state(selected, focused, hover);
    }
  }

  &:hover {
    @include state(selected, hover);
  }

  &:active {
    @include state(selected, active);
  }
}

.focused {
  @include state(focused);

  &:hover {
    @include state(focused, hover);
  }

  &:active {
    @include state(focused, active);
  }
}

// stylelint-disable-next-line selector-max-class
.focusedInner,
.focusedInner.focused,
.focusedInner.focused.selected {
  box-shadow: none;
}

.Link,
.Button {
  position: absolute;
  z-index: resource-list-item(clickable-stacking-order);
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
}

.Button {
  padding: 0;
  border: none;
}

// Item inner container
.Container {
  position: relative;
  z-index: resource-list-item(content-stacking-order);
  padding: resource-list-item(padding) spacing();
  min-height: resource-list-item(min-height);
  display: flex;
  align-items: flex-start;

  @include breakpoint-after(resource-list-item(breakpoint-small)) {
    padding: resource-list-item(padding) spacing(loose);
  }
}

.Owned {
  display: flex;
  align-self: flex-start;
}

// Item handle
.Handle {
  width: resource-list-item(handle-width);
  min-height: resource-list-item(min-height);
  justify-content: center;
  align-items: center;
  margin: (-1 * resource-list-item(padding)) spacing(extra-tight)
    (-1 * resource-list-item(padding)) resource-list-item(control-indent);
  display: flex;

  @include breakpoint-before(resource-list-item(breakpoint-small)) {
    visibility: hidden;

    .selectMode & {
      visibility: visible;
    }
  }
}

.selectable {
  width: calc(100% + #{resource-list-item(translate-offset)});
  transform: translateX(-1 * resource-list-item(translate-offset));
  transition: transform easing() duration();
  margin-right: -1 * resource-list-item(translate-offset);

  &.selectMode {
    transform: translateX(0);
  }

  @include breakpoint-after(resource-list-item(breakpoint-small)) {
    width: 100%;
    transform: translateX(0);
    margin-right: 0;
  }
}

.Media {
  flex: 0 0 auto;
  margin-right: spacing(loose);
  color: inherit;
  text-decoration: none;
}

// Item content
.Content {
  @include layout-flex-fix;
  flex: 1 1 auto;
  align-self: center;
}

// Item actions
.Actions {
  position: absolute;
  top: 0;
  display: flex;
  pointer-events: initial;
  height: 100%;
  max-height: resource-list-item(actions-height);

  @include action-hide;

  .focused & {
    @include action-unhide;
  }

  @include page-content-when-partially-condensed {
    display: none;
  }
}

.persistActions {
  .Actions {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    flex-basis: auto;
    align-items: center;
    margin-top: 0;
    margin-left: spacing();
    pointer-events: initial;
    height: 100%;

    @include page-content-when-partially-condensed {
      display: none;
    }
  }
}

.Disclosure {
  position: relative;
  top: -1 * resource-list-item(padding);
  right: -1 * spacing();
  display: none;
  width: resource-list-item(disclosure-width);
  min-height: resource-list-item(min-height);
  pointer-events: initial;

  .selectMode & {
    display: none;
  }

  @include page-content-when-partially-condensed {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}