libs/barista-components/show-more/src/show-more.scss
@import '../../style/font-mixins';
@import '../../core/src/style/interactive-common';
@import '../../core/src/style/variables';

:host {
  border: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  outline: none;
  padding: 0;
  text-align: center;
  width: 100%;
  background: none;
  appearance: none;

  --dt-show-more-default-color: var(--dt-accent-default-color);
  --dt-show-more-hover-color: var(--dt-accent-hover-color);
  --dt-show-more-active-color: var(--dt-accent-active-color);
  --dt-show-more-disabled-color: #{$disabledcolor};

  @include dt-cdkmonitor-focus-style();
}

:host-context(.dt-theme-dark) {
  --dt-show-more-default-color: var(--dt-accent-default-color);
  --dt-show-more-hover-color: var(--dt-accent-hover-color);
  --dt-show-more-active-color: var(--dt-accent-active-color);
  --dt-show-more-disabled-color: #{$gray-500};

  @include dt-cdkmonitor-focus-style(true);
}

.dt-show-more-label {
  @include dt-main-font();
  color: var(--dt-show-more-default-color);
}

.dt-show-more-icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  fill: var(--dt-show-more-default-color);
  transform: rotate(0deg);
  transition: transform 400ms;
}

:host:hover {
  cursor: pointer;

  .dt-show-more-label {
    color: var(--dt-show-more-hover-color);
  }

  .dt-show-more-icon {
    fill: var(--dt-show-more-hover-color);
  }
}

:host.dt-show-more-disabled {
  cursor: default;
  outline: none;

  .dt-show-more-label {
    color: var(--dt-show-more-disabled-color);
  }

  .dt-show-more-icon {
    fill: var(--dt-show-more-disabled-color);
  }
}

:host.dt-show-more-show-less .dt-show-more-icon {
  transform: rotate(180deg);
}

:host-context(.dt-theme-dark) {
  .dt-show-more-label {
    color: $gray-200;
  }

  &:hover:not(.dt-show-more-disabled) {
    .dt-show-more-label {
      color: #ffffff;
    }
  }
}
