@import '../../variables';

:local {
  .nav-help {
    background-color: var(--terra-consumer--nav-help-button-background, #fff);
    border: 0;
    border-radius: 20px;
    box-shadow: 0 1px 1px #666;
    color: var(--terra-consumer--nav-help-button-color, #3d3d3d);
    display: inline-block;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    padding: 6px 13px;

    &:hover {
      background: var(--terra-consumer--nav-help-button-hover-background, #cfd0d1);
      cursor: pointer;
    }

    &:focus {
      background: var(--terra-consumer--nav-help-button-focus-background, #cfd0d1);
    }

    &:active {
      color: inherit;
    }
  }

  .help-item {
    background: var(--terra-consumer--nav-help-item-background, #fff);
    border: 0;
    border-radius: 0;
    display: block;
    font-family: inherit;
    padding: 20px;
    text-decoration: none;
    width: 100%;

    &:not(:first-child) {
      border-top: 1px solid var(--terra-consumer--nav-help-item-border-color, #dedfe0);
    }

    &:hover {
      background: var(--terra-consumer--nav-help-item-hover-background, #cfd0d1);
      cursor: pointer;
    }

    &:focus {
      background: var(--terra-consumer--nav-help-item-focus-background, #cfd0d1);
    }
  }

  .help-item-wrapper {
    background: #f3f3f3;

    &:not(:first-child) {
      border-top: 1px solid var(--terra-consumer--nav-help-item-border-color, #dedfe0);
    }
  }

  .toggler-open {
    background: #f3f3f3;
  }

  .help-item-text {
    color: var(--terra-consumer--nav-help-item-text-color, #383f42);
    font-size: 14px;
    line-height: 18px;
    text-align: left;
  }

  .help-subitem {
    color: var(--terra-consumer--nav-help-subitem-text-color, #64696c);
    font-size: 14px;
    line-height: 18px;
    overflow-wrap: break-word;
    text-decoration: none;
  }

  .icon-text-padding {
    padding-right: 10px;
  }

  .icon-text-padding:empty {
    display: none;
  }

  .toggler-padding {
    padding: 0 !important;
  }

  .toggler-content-alignment {
    margin: 0;
    padding: 10px 40px 20px 20px;
    text-align: left;
  }

  .button-text-padding {
    padding-left: 6px;
  }

  .link-text-style {
    text-decoration: none;
  }

  .popup-content {
    border-radius: 5px;
    box-shadow: 0 1px 1px #666;
    margin: 0 15px 15px 0;
    position: relative;
  }
}