.navigation-icon-button-molecule.theme-default {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  padding: 3px 0 0;
  border: none;
  transition: background 0.3s, border-bottom 0.3s;
  cursor: pointer;
  color: var(--endpass-ui-color-white);
}

.navigation-icon-button-molecule.theme-default.skin-primary {
  border-bottom: 3px solid var(--endpass-ui-color-primary-7);
  background: var(--endpass-ui-color-primary-7);
}

.navigation-icon-button-molecule.theme-default.skin-primary:focus {
    background: var(--endpass-ui-color-primary-8);
    border-bottom: 3px var(--endpass-ui-color-primary-8);
  }

.navigation-icon-button-molecule.theme-default.skin-primary:active,
.navigation-icon-button-molecule.theme-default.skin-primary.is-active {
  background: var(--endpass-ui-color-primary-7);
  border-bottom: 3px solid #d0b0ff;
}

.navigation-icon-button-molecule.theme-default.skin-secondary {
  border-bottom: 3px solid var(--endpass-ui-color-blue-1);
  background: var(--endpass-ui-color-blue-1);
}

.navigation-icon-button-molecule.theme-default.skin-primary:active,
.navigation-icon-button-molecule.theme-default.skin-primary.is-active,
.navigation-icon-button-molecule.theme-default.skin-secondary:focus {
  border-bottom: 3px solid var(--endpass-ui-color-blue-1);
  background: var(--endpass-ui-color-blue-2);
}

.navigation-icon-button-molecule.theme-default .svg-atom {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}