@import "./../styles/index.scss";

.cptx-section-item-domain {
  margin-top: 15px;
}

.criptext-alias-item-container {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.criptext-alias-item-wrapper {
  display: flex;
  height: 100%;
  flex-grow: 1;
  max-width: 282px;

  .criptext-alias-item-delete {
    color: #fb6363;
    font-size: 26px;
    visibility: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
  }

  &:hover {
    
    .criptext-alias-item-delete {
      visibility: visible;
      pointer-events: all;
      cursor: pointer;
    }
  }
}

.criptext-alias-item-name {
  font-size: 12px;
  display: flex;
  align-items: center;
}

/* THEME
   ----------------------------- */
   @mixin themable(
    $_THEME,
    $_COLOR_TEXT_MAIN_TITLE,
    $_COLOR_TEXT_DISABLE_TITLE,
    $_BACKGROUND_SETTINGS_HOVER
  ) {
    [data-theme^="#{$_THEME}"],
    [data-theme] [data-theme^="#{$_THEME}"] {
      .criptext-alias-item-name {
        color: $_COLOR_TEXT_MAIN_TITLE;
      
        span {
          color: $_COLOR_TEXT_DISABLE_TITLE;
        }
      }

      .criptext-alias-item-wrapper {
        &:hover {
          background-color: $_BACKGROUND_SETTINGS_HOVER;
        }
      }
    }
  }
  
  @include themable(
    $_THEME_LIGHT,
    $_COLOR_TEXT_MAIN_TITLE_LIGHT,
    $_COLOR_TEXT_DISABLE_TITLE_LIGHT,
    $_BACKGROUND_SETTINGS_HOVER_LIGHT
  );
  @include themable(
    $_THEME_DARK,
    $_COLOR_TEXT_MAIN_TITLE_DARK,
    $_COLOR_TEXT_DISABLE_TITLE_DARK,
    $_BACKGROUND_SETTINGS_HOVER_DARK
  );
