@include export-module('toolbar-theme') {

  /*! toolbar theme */
  /* stylelint-disable property-no-vendor-prefix */
  .e-toolbar {
    -webkit-tap-highlight-color: $tbar-tab-highlight-color;
    background: $tbar-default-bg;
    border: $tbar-border-size $tbar-border-type $tbar-default-border;
    box-shadow: $tbar-box-shadow;

    &.e-vertical {

      .e-hor-nav {
        border: $tbar-border-nav-type $tbar-default-border;
        border-width: $tbar-popup-vertical-border-width;
      }

      &.e-rtl .e-hor-nav {
        border: $tbar-border-nav-type $tbar-default-border;
        border-width: $tbar-popup-vertical-rtl-border-width;
      }

      .e-toolbar-items .e-toolbar-item {

        &.e-separator {
          border-width: $tba-vertical-separator;
        }
      }
    }

    &.e-extended-toolbar {

      .e-toolbar-extended {

        .e-toolbar-item.e-overlay {
          background: $tbar-default-bg;
        }

        .e-toolbar-item.e-separator {
          border: $tbar-separator-border-type $tbar-separator-border;
          border-width: $tba-horizontal-separator;
        }

        .e-toolbar-item .e-tbar-btn .e-icons {
          color: $tbar-default-icon-color;
        }

        .e-toolbar-item .e-tbar-btn {
          background: $tbar-default-bg;
          box-shadow: $tbar-btn-box-shadow;
          color: $tbar-default-font;
          border: $tbar-ext-btn-border;

          .e-toolbar-item .e-tbar-btn-text {
            color: $tbar-default-font;
          }

          &:focus {
            background: $tbar-focus-bg;
            border-radius: $tbar-btn-border-radius;
            color: $tbar-hover-font-color;
            border-color: $tbar-btn-focus-border-color;
            border-style: $tbar-border-nav-type;
            border-width: $tbar-btn-hover-border-size;
            box-shadow: $tbar-ext-btn-focus-box-shadow;

            .e-icons {
              color: $tbar-ext-btn-icon-hover-font;
            }

            .e-tbar-btn-text {
              color: $tbar-ext-btn-text-hover-font;
            }
          }

          &:hover {
            background: $tbar-hover-bg;
            border-radius: $tbar-btn-border-radius;
            color: $tbar-hover-font-color;
            border-color: $tbar-ext-btn-hover-border-color;
            border-style: $tbar-border-nav-type;
            border-width: $tbar-ext-btn-hover-border-size;

            &:active {

              .e-icons {
                color: $tbar-ext-btn-icon-hover-active-font;
              }

              .e-tbar-btn-text {
                color: $tbar-ext-btn-text-hover-active-font;
              }
            }

            .e-icons {
              color: $tbar-ext-btn-icon-hover-font;
            }

            .e-tbar-btn-text {
              color: $tbar-ext-btn-text-hover-font;
            }
          }

          &:active {
            background: $tbar-btn-press-bg;
            border-radius: $tbar-btn-border-radius;
            box-shadow: $tbar-btn-pressed-box-shadow;
            color: $tbar-btn-active-font-color;
            border-color: $tbar-press-border-color;
            border-style: $tbar-border-nav-type;
            border-width: $tbar-ext-btn-active-border-size;

            .e-icons {
              color: $tbar-ext-btn-icon-active-font;
            }

            .e-tbar-btn-text {
              color: $tbar-ext-btn-text-active-font;
            }
          }
        }
      }
    }

    .e-tbar-btn.e-btn .e-icons {
      color: $tbar-default-icon-color;
    }

    .e-toolbar-pop {
      background: $tbar-pop-bg;
      border: $tbar-border-size $tbar-border-type $tbar-default-border;
      box-shadow: $tbar-pop-box-shadow;

      .e-toolbar-item {

        .e-tbar-btn {
          background: $tbar-popup-btn-bg;
        }

        .e-tbar-btn:hover {
          background: $tbar-popup-btn-hover-bg;
          box-shadow: $tbar-popup-btn-hover-box-shadow;
          color: $tbar-popup-btn-hover-color;
          border-color: $tbar-hover-border-color;
          border-style: $tbar-border-nav-type;
          border-width: $tbar-popup-btn-hover-border-size;

          .e-icons {
            color: $tbar-popup-btn-hover-icons-color;
          }

          .e-tbar-btn-text {
            color: $tbar-popup-btn-hover-text-color;
          }
        }

        .e-tbar-btn:active {
          background: $tbar-popup-btn-active-bg;
          box-shadow: $tbar-popup-btn-active-box-shadow;
          color: $tbar-popup-btn-active-color;
          border-color: $tbar-press-border-color;
          border-style: $tbar-border-nav-type;
          border-width: $tbar-popup-btn-hover-border-size;

          .e-icons {
            color: $tbar-popup-btn-active-icons-color;
          }

          .e-tbar-btn-text {
            color: $tbar-popup-btn-active-text-color;
          }
        }

        .e-tbar-btn:focus {
          background: $tbar-popup-btn-focus-bg;
          box-shadow: $tbar-popup-btn-focus-box-shadow;
          color: $tbar-popup-btn-focus-color;
          border-color: $tbar-btn-focus-border-color;
          border-style: $tbar-border-nav-type;
          border-width: $tbar-popup-btn-hover-border-size;

          .e-icons {
            color: $tbar-popup-btn-focus-icons-color;
          }

          .e-tbar-btn-text {
            color: $tbar-popup-btn-focus-text-color;
          }
        }

        .e-btn:focus {
          outline: $tbar-popup-btn-focus-outline;
        }

        &:not(.e-separator) {
          background: $tbar-item-pop-bg-color;
        }
      }
    }

    &.e-extended-toolbar .e-toolbar-pop {
      background: $tbar-default-bg;
    }

    &.e-toolpop {

      .e-hor-nav.e-nav-active,
      .e-hor-nav.e-nav-active:not(.e-expended-nav) {
        background: $tbar-pressed-bg;
        box-shadow: $tbar-nav-pressed-box-shadow;
        border-color: $tbar-popup-nav-pressed-border-color;
        border-style: $tbar-border-nav-type;
        border-width: $tbar-popup-nav-pressed-border-size;

        &:focus {
          border-color: $tbar-popup-nav-pressed-focus-border-color;
          border-style: $tbar-border-nav-type;
          border-width: $tbar-popup-nav-pressed-focus-border-size;
        }

        .e-icons {
          color: $tbar-active-font-color;

          &:active {
            color: $tbar-popup-nav-pressed-icons-active-color;
          }
        }
      }
    }

    .e-tbar-btn {
      background: $tbar-items-default-bg;
      box-shadow: $tbar-btn-box-shadow;
      color: $tbar-default-font;
      border: $tbar-btn-border;

      &:focus {
        background: $tbar-focus-bg;
        border-radius: $tbar-btn-border-radius;
        color: $tbar-hover-font;
        border-color: $tbar-btn-focus-border-color;
        border-style: $tbar-border-nav-type;
        border-width: $tbar-btn-hover-border-size;
        box-shadow: $tbar-ext-btn-focus-box-shadow;

        .e-icons {
          color: $tbar-btn-icons-focus-color;
        }

        .e-tbar-btn-text {
          color: $tbar-btn-text-focus-color;
        }
      }

      &:hover {
        background: $tbar-hover-bg;
        border-color: $tbar-hover-border-color;
        border-style: $tbar-border-nav-type;
        border-width: $tbar-btn-hover-border-size;
        border-radius: $tbar-btn-border-radius;
        color: $tbar-hover-font;
      }
    }

    .e-toolbar-items {
      background: $tbar-default-bg;

      .e-toolbar-item {

        &.e-overlay {
          background: $tbar-default-bg;
          opacity: $tbar-btn-overlay-opacity;

          .e-tbar-btn-text {
            color: $tbar-default-font-overlay;
          }

          .e-icons {
            color: $tbar-default-icon-overlay;
          }
        }

        .e-tbar-btn-text {
          color: $tbar-btn-text-color;
        }

        .e-tbar-btn {

          &.e-flat.e-active {
            .e-tbar-btn-text {
              color: $tbar-btn-pressed-text-color;
            }

            &:focus {
              box-shadow: $tbar-btn-pressed-focus-box-shadow;
            }
          }

          &:hover {
            .e-icons {
              color: $tbar-btn-icons-focus-color;
            }

            .e-tbar-btn-text {
              color: $tbar-btn-text-focus-color;
            }

            &:active {
              .e-icons {
                color: $tbar-btn-hover-active-icons-color;
              }
  
              .e-tbar-btn-text {
                color: $tbar-btn-hover-active-text-color;
              }
            }
          }

          &:focus {
            .e-icons {
              color: $tbar-btn-icons-focus-color;
            }

            .e-tbar-btn-text {
              color: $tbar-btn-text-focus-color;
            }
          }
        }

        &.e-separator {
          border: $tbar-separator-border-type $tbar-separator-border;
          border-width: $tba-horizontal-separator;
        }
      }
    }

    &.e-rtl .e-hor-nav {
      background: $tbar-default-bg;
      border: $tbar-border-nav-type $tbar-default-border;
      border-left: 0;
      border-width: $tbar-popup-rtl-border-width;

      &:not(.e-nav-active):hover {
        background: $tbar-hover-bg;
        color: $tbar-hover-font;
      }
    }

    .e-hor-nav {
      background: $tbar-default-bg;
      border: $tbar-border-nav-type $tbar-default-border;
      border-width: $tbar-popup-border-width;
    }

    .e-hor-nav  {

      &::after {
        @include tbar-btn-animation;
      }

      &.e-nav-active {
        &:active,
        &:focus,
        &:hover {
          border-bottom-right-radius: $tbar-popup-nav-active-border-bottom-right-radius;
        }
      }

      &:active {
        border: $tbar-nav-press-border;
        box-shadow: $tbar-nav-pressed-box-shadow;
        color: $tbar-select-font;
        background: $tbar-popup-nav-active-bg;

        .e-icons {
          color: $tbar-popup-nav-active-icons-color;
        }

        &::after {
          @include tbar-btn-animation-after;
        }
      }

      &:hover {
        background: $tbar-popup-nav-hover-bg;
        border-left: $tbar-nav-hover-border;
        color: $tbar-popup-nav-hover-color;

        .e-icons {
          color: $tbar-popup-nav-hover-icons-color;
        }

        &:not(.e-nav-active) {
          border-color: $tbar-popup-nav-hover-border-color;
          border-style: $tbar-border-nav-type;
          border-width: $tbar-popup-nav-hover-border-size;
        }

        &:active {
          background: $tbar-popup-nav-hover-active-bg;
          border-color: $tbar-popup-nav-hover-active-border-color;
          border-style: $tbar-border-nav-type;
          border-width: $tbar-popup-nav-hover-active-border-size;
        }
      }

      &:focus {
        background: $tbar-popup-nav-focus-bg;
        color: $tbar-popup-nav-focus-color;
        border-color: $tbar-popup-nav-focus-border-color;
        border-style: $tbar-border-nav-type;
        border-width: $tbar-popup-nav-focus-border-size;

        .e-icons {
          color: $tbar-popup-nav-hover-icons-color;
        }
      }
    }

    .e-tbar-btn {

      &:active {
        background: $tbar-btn-active-bg;
        border-color: $tbar-press-border-color;
        border-style: $tbar-border-nav-type;
        border-width: $tbar-btn-active-border-size;
        border-radius: $tbar-btn-border-radius;
        box-shadow: $tbar-btn-pressed-box-shadow;
        color: $tbar-press-font;

        .e-icons {
          color: $tbar-btn-active-icons-color;
        }

        .e-tbar-btn-text {
          color: $tbar-btn-active-text-color;
        }
      }
    }
  }
}
