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

$breakpoint-small: 458px;

@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 {
  --pc-resource-item-min-height: 44px;
  --pc-resource-item-disclosure-width: 48px;
  // Offset equals handle width + handle margin-left + handle margin-right
  --pc-resource-item-offset: 40px;
  --pc-resource-item-clickable-stacking-order: 1;
  --pc-resource-item-content-stacking-order: 2;
  position: relative;
  outline: none;
  cursor: pointer;

  &:not(.persistActions) {
    .Actions {
      right: var(--p-space-4);
    }
  }

  &:hover {
    background-color: var(--p-surface-hovered);

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

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

  &:active {
    background-color: var(--p-surface-pressed);
  }
}

.ItemWrapper {
  overflow: hidden;
  max-width: 100%;
}

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

.Link,
.Button {
  position: absolute;
  z-index: var(--pc-resource-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: var(--pc-resource-item-content-stacking-order);
  padding: var(--p-space-3) var(--p-space-4);
  min-height: var(--pc-resource-item-min-height);
  display: flex;
  align-items: flex-start;

  @include breakpoint-after($breakpoint-small) {
    padding: var(--p-space-3) var(--p-space-5);
  }
}

.alignmentLeading {
  align-items: flex-start;
}

.alignmentTrailing {
  align-items: flex-end;
}

.alignmentCenter {
  align-items: center;
}

.alignmentFill {
  align-items: stretch;
}

.alignmentBaseline {
  align-items: baseline;
}

.Owned {
  display: flex;
}

.OwnedNoMedia {
  padding-top: var(--p-space-1);
}

// Item handle
.Handle {
  width: 48px;
  min-height: var(--pc-resource-item-min-height);
  justify-content: center;
  align-items: center;
  margin: calc(-1 * var(--p-space-3)) var(--p-space-1)
    calc(-1 * var(--p-space-3)) calc(-1 * var(--p-space-3));
  display: flex;

  @include breakpoint-before($breakpoint-small, false) {
    visibility: hidden;

    .selectMode & {
      visibility: visible;
    }
  }
}

.selectable {
  width: calc(100% + var(--pc-resource-item-offset));
  transform: translateX(calc(-1 * var(--pc-resource-item-offset)));
  transition: transform var(--p-ease) var(--p-duration-200);
  margin-right: calc(-1 * var(--pc-resource-item-offset));

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

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

.Media {
  flex: 0 0 auto;
  margin-right: var(--p-space-5);
  color: inherit;
  text-decoration: none;
}

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

// Item actions
.Actions {
  position: absolute;
  top: 0;
  display: flex;
  pointer-events: initial;
  height: 100%;
  max-height: 56px;

  @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: var(--p-space-4);
    pointer-events: initial;
    height: 100%;

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

.Disclosure {
  position: relative;
  top: calc(-1 * var(--p-space-3));
  right: calc(-1 * var(--p-space-4));
  display: none;
  width: var(--pc-resource-item-disclosure-width);
  min-height: var(--pc-resource-item-min-height);
  pointer-events: initial;

  .selectMode & {
    display: none;
  }

  @include page-content-when-partially-condensed {
    display: flex;
    flex: 0 0 var(--pc-resource-item-disclosure-width);
    justify-content: center;
    align-items: center;
  }
}

.selected {
  background-color: var(--p-surface-selected);

  &:hover {
    background-color: var(--p-surface-selected-hovered);
  }

  &:active {
    background-color: var(--p-surface-selected-pressed);
  }
}

.ListItem {
  position: relative;
  @include focus-ring($border-width: -1px);

  .ListItem + & {
    border-top: var(--p-border-divider);
  }

  &::after {
    border-radius: var(--p-border-radius-05);
  }

  &:last-of-type {
    border-bottom-left-radius: var(--p-border-radius-2);
    border-bottom-right-radius: var(--p-border-radius-2);

    .ItemWrapper {
      border-bottom-left-radius: var(--p-border-radius-2);
      border-bottom-right-radius: var(--p-border-radius-2);
    }
  }

  // stylelint-disable-next-line selector-max-specificity
  &:last-of-type.focused::after {
    border-bottom-left-radius: var(--p-border-radius-2);
    border-bottom-right-radius: var(--p-border-radius-2);
  }

  &.focused {
    @include focus-ring($style: 'focused');
    z-index: var(--pc-resource-item-clickable-stacking-order);
  }

  // stylelint-disable-next-line selector-max-specificity, selector-max-combinators
  * + ul > &:first-of-type.focused::after {
    top: 1px;
  }
}