/**
 * AppBuckets UI
 *
 * _Item @ src/styles/elements/_item.scss
 *
 * Defined at 12 ott 2020
 * Copyright Marco Cavanna • 2020
 *
 * ---
 *
 *
 */
@use 'sass:math';


/******
    Item Base Style
******/
.item {
  display: flex;
  font-size: 1em;

  &.centered {
    align-items: center;
  }

  // ----
  //  Set Base Content Direction
  // ----
  &,
  &.has-text-left {
    flex-direction: row;

    > .avatar + .content {
      margin-left: $item-content-spacer;
    }
  }
}

/******
    Change Flex direction on Text Right item
******/
.item.has-text-right,
.has-text-right > .item:not(.has-text-left) {
  flex-direction: row-reverse;

  > .avatar + .content {
    margin-left: 0;
    margin-right: $item-content-spacer;
  }
}


/******
    Item Content Style
******/
.item > .content {
  color: $item-content-color;
  min-height: $item-content-min-height;
  flex: 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;

  > .item-header {
    font-weight: $item-header-font-weight;
    font-size: $item-header-font-size;
  }

  > .item-text {
    opacity: $item-text-opacity;
    font-weight: $item-text-font-weight;
    font-size: $item-text-font-size;
  }

  > .item-header + .item-meta,
  > .item-text + .item-meta {
    opacity: $item-meta-opacity;
    font-weight: $item-meta-font-weight;
    font-size: $item-meta-font-size;
    margin-top: math.div($item-content-spacer, 1.5);
    padding-top: math.div($item-content-spacer, 1.5);
    border-top: solid 1px $item-meta-divider-color;
  }

  > .item-header + .loader {
    margin-top: $item-progress-spacer;
  }
}


/******
    Item Color Variation
******/
.item {
  @each $label, $color in $ui-color-map {
    &.is-#{$label} {
      > .content {
        color: $color;
      }
    }
  }
}


/******
    Item Tools Style
******/
.item > .tools {
  height: $item-min-height;
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
  flex-wrap: nowrap;

  > .button.flat {
    border-radius: 500rem;

    @include hover {
      background-color: rgba(0, 0, 0, 0);
      will-change: background-color;
      transition: background-color $transition-speed-fast $transition-ease;

      &:hover {
        background-color: $item-tool-hover-color;
      }
    }

    > .icon {
      opacity: $item-tools-opacity;
    }
  }
}

.item > .content + .tools {
  margin-left: $item-content-spacer;
}


/******
    Clickable and Solid Items
******/
.clickable.item {
  border-radius: $item-clickable-border-radius;
  padding: $item-clickable-border-radius * 1.5;

  &:not(.disabled) {
    cursor: pointer;

    @include hover {
      background-color: transparent;
      will-change: background-color;
      transition: background-color $transition-speed-fast $transition-ease;

      &:hover {
        background-color: $item-clickable-hover-color;
      }
    }
  }
}

.solid.item,
.solid.clickable.item {
  border-radius: $item-solid-border-radius;
  padding: $item-solid-border-radius * 1.5;
  background-color: $item-solid-background-color !important;

  @if $item-solid-clickable-hover-elevation != 0 {
    &:not(.disabled) {
      @include smoothShadow(0);
      will-change: box-shadow;
      transition: box-shadow $transition-speed-fast $transition-ease;

      @include hover {
        &:hover {
          @include smoothShadow($item-solid-clickable-hover-elevation);
        }
      }
    }
  }
}

/** Remove box shadow on non clickable item */
@include hover {
  .solid.item:not(.disabled):not(.clickable):hover {
    box-shadow: none !important;
  }
}


/******
    Disabled Items
******/
.disabled.item {
  opacity: $disabled-element-opacity;
}


/******
    Item Group
******/
.items {
  > .item {
    &:not(:last-child) {
      margin-bottom: $items-group-spacer;
    }

    &.clickable {
      margin-bottom: 0;
      border-radius: 0;

      &:first-child {
        border-top-left-radius: $item-clickable-border-radius;
        border-top-right-radius: $item-clickable-border-radius;
      }

      &:last-child {
        border-bottom-left-radius: $item-clickable-border-radius;
        border-bottom-right-radius: $item-clickable-border-radius;
      }
    }
  }

  &.divided > .item:not(:last-child) {
    border-bottom: solid 1px $items-divider-color;

    &:not(.clickable) {
      padding-bottom: math.div($items-group-spacer, 2);
      margin-bottom: math.div($items-group-spacer, 2);
    }
  }

  &.relaxed {
    > .item:not(:last-child):not(.clickable) {
      margin-bottom: $items-group-spacer * 1.5;
    }

    &.divided > .item:not(:last-child):not(.clickable) {
      padding-bottom: math.div(($items-group-spacer * 1.5), 2);
      margin-bottom: math.div(($items-group-spacer * 1.5), 2);
    }

    > .item.clickable {
      padding-bottom: $item-clickable-border-radius * 2;
      padding-top: $item-clickable-border-radius * 2;
    }
  }
}