@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;

@include mixins.sky-component('default', '.sky-expansion-indicator') {
  display: inline-block;
  border: none;
  background-color: transparent;
  flex-shrink: 0;
  height: $sky-context-menu-size;
  margin: 0;
  overflow: hidden;
  width: $sky-context-menu-size;
  position: relative;
  vertical-align: top;
}

@include mixins.sky-component('default', '.sky-expansion-indicator-part') {
  border-color: $sky-text-color-icon-borderless;
  border-style: solid;
  border-width: 3px 0 0 0;
  display: inline-block;
  height: 10px;
  position: absolute;
  top: 10px;
  transition:
    transform $sky-transition-time-medium,
    left $sky-transition-time-medium;
  vertical-align: top;
  width: 10px;
}

@include mixins.sky-component('default', '.sky-expansion-indicator-up') {
  .sky-expansion-indicator-left {
    left: 7px;
    transform: rotate(-45deg);
  }

  .sky-expansion-indicator-right {
    left: 7px;
    transform: rotate(45deg);
  }
}

@include mixins.sky-component('default', '.sky-expansion-indicator-down') {
  .sky-expansion-indicator-left {
    left: 2px;
    transform: rotate(45deg);
  }

  .sky-expansion-indicator-right {
    left: 12px;
    transform: rotate(-45deg);
  }
}
