:host {
  @extend %component-host;
  @include borderShadow();
  align-items: center;
  background-color: var(--calcite-app-background-clear);
  display: flex;
  margin: 0;
  color: var(--calcite-app-foreground);
  transition: background-color var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);
  animation: calcite-app-fade-in var(--calcite-app-animation-time) var(--calcite-app-easing-function);
}

@import "../../scss/includes/_component";

:host(:hover),
:host(:focus) {
  background-color: var(--calcite-app-background-hover);
}

.icon {
  color: var(--calcite-app-foreground-link);
  flex: 0 0 0%;
  line-height: 0;
  width: var(--calcite-app-icon-size);
  margin: 0 var(--calcite-app-side-spacing-quarter);
  opacity: 0;
}

:host([selected]) .icon {
  transition: opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);
  opacity: 1;
}

.label {
  display: flex;
  flex: 1 1 auto;
  padding: var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-quarter);
  align-items: center;
  cursor: pointer;
  @include focus-style-base();
  &:focus {
    @include focus-style-inset();
  }
}

.text-container {
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
  pointer-events: none;
  padding: 0 var(--calcite-app-side-spacing-quarter);
}

.title {
  font-size: var(--calcite-app-font-size--1);
  word-wrap: break-word;
  word-break: break-word;
}

.description {
  color: var(--calcite-app-foreground-subtle);
  font-family: var(--calcite-app-font-family-monospace);
  font-size: var(--calcite-app-font-size--2);
  margin-top: var(--calcite-app-cap-spacing-quarter);
  word-wrap: break-word;
  word-break: break-word;
}

.action {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  justify-self: flex-end;
  margin: var(--calcite-app-cap-spacing-quarter) var(--calcite-app-side-spacing-half);
}
