@import '../../../../globals/vars';
@mixin backgroundGradient($color) {
  background: linear-gradient(90deg, rgba(229, 229, 229, 0) 0, #{$color} 16px);
}

.#{$iot-prefix}--row-actions-container {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  /* If the actions are focused on, they should show up */
  > *:focus {
    opacity: 1;
  }

  /* the spinner was a little too big and causing the row to scroll so need to scale down a bit */
  .#{$prefix}--loading--small {
    width: 1.875rem;
    height: 1.875rem;
  }

  > * {
    margin-left: $spacing-04;
  }
}

.#{$iot-prefix}--row-actions-container__background {
  height: 100%;
  align-items: center;
  display: flex;
  flex-shrink: 0;
  opacity: 0;
  padding-left: $spacing-06;
  z-index: 0;
  @include backgroundGradient($hover-ui);
}

.#{$prefix}--data-table tbody tr:hover .#{$iot-prefix}--row-actions-container__background {
  background: linear-gradient(90deg, rgba(229, 229, 229, 0) 0, #{$hover-ui} $spacing-05);
}

.#{$iot-prefix}--action-overflow-item {
  div {
    width: 100%;
  }
  svg {
    margin-right: $spacing-03;

    html[dir='rtl'] & {
      margin-left: $spacing-03;
      margin-right: 0;
    }
  }
}

.#{$iot-prefix}--row-actions-container__background:focus-within {
  opacity: 1;
  @include backgroundGradient($ui-01);
  transition: opacity $duration--fast-02 motion(entrance, productive);
}

.#{$prefix}--data-table tbody tr:hover .#{$iot-prefix}--row-actions-container__background,
.#{$iot-prefix}--row-actions-container__background--overflow-menu-open {
  opacity: 1;
  transition: opacity $duration--fast-02 motion(entrance, productive);
}

.#{$prefix}--data-table tbody tr {
  &:not(:hover) .#{$iot-prefix}--row-actions-container__background--overflow-menu-open {
    @include backgroundGradient($ui-01);
  }

  &.#{$prefix}--data-table--selected:hover .#{$iot-prefix}--row-actions-container__background {
    @include backgroundGradient($hover-selected-ui);
  }

  &.#{$prefix}--data-table--selected:not(:hover) {
    .#{$iot-prefix}--row-actions-container__background--overflow-menu-open,
    .#{$iot-prefix}--row-actions-container__background:focus-within {
      @include backgroundGradient($carbon--gray-20);
    }
  }
}

html[dir='rtl'] {
  .#{$iot-prefix}--row-actions-container__background {
    margin-left: unset;
    margin-right: $spacing-04;
    padding-left: unset;
    padding-right: $spacing-06;

    .#{$prefix}--btn__icon {
      margin-left: unset;
      margin-right: $spacing-03;
      transform: rotate(180deg);
    }
  }
}

.#{$iot-prefix}--row-actions-cell--table-cell {
  &.#{$iot-prefix}--row-actions-cell--table-cell {
    padding: 0;
    vertical-align: middle;
  }
}

.#{$iot-prefix}--row-actions-cell--overflow-menu-content {
  display: flex;
  align-items: center;
}

.#{$iot-prefix}--row-actions-cell--overflow-menu {
  &.#{$iot-prefix}--row-actions-cell--overflow-menu {
    margin-left: 0.5rem;
    &:hover > svg {
      fill: $interactive-01;
    }
  }
}

.#{$iot-prefix}--row-actions-error--span {
  margin-left: 0.5rem;
  line-height: 1.875rem;
}

.#{$iot-prefix}--row-actions-error--title {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.#{$iot-prefix}--row-actions-error--footer {
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.#{$iot-prefix}--row-actions-error--tooltip {
  font-size: 0.875rem;
}