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

.tag-item{
  align-items: center;
  border-radius: 14px;
  box-sizing: initial;
  display: flex;
  flex-grow: 0;
  font-size: 13px;
  height: 18px;
  margin: 2px 10px 2px 0;
  padding: 3px 2px 3px 10px;

  &.tag-default{
    border: solid 1px transparent;
    cursor: pointer;
  }

  &.tag-loading{
    font-style: italic;
    color: purple;
  }

  &.tag-error {
    color: #fff;
    border: solid 1px transparent;

    > .icon-exit {
      color: #b40000;
    }
  }

  &.tag-app-domain{
    border: solid 1px transparent;
  }

  &.tag-expanded{
    border-style: dashed;
    display: block;
    padding-left: 3px;
    padding-right: 3px;
    position: relative;

    a{
      margin: 0 8px;
      visibility: hidden;
    }

    input{
      background-color: transparent;
      border: none;
      color: inherit;
      font-family: NunitoSans;
      font-size: 13px;
      font-weight: 200;
      left: 10px;
      margin-top: 0px;
      padding: 0px;
      position: absolute;
      width: calc(100% - 15px);
    }

    textarea{
      border: none;
      resize: none;
      width: calc(100% - 0px);

      &:focus{
        outline: 0;
      }
    }
  }
  
  a{
    font-weight: 200;
    text-decoration: none;

    &.icon-exit{
      background-color: transparent;
      font-size: 22px;
      line-height: 10px;
      text-decoration: none;
    }
  }
}

/* THEME
   ----------------------------- */
@mixin themable($_THEME, $_BACKGROUND_COLOR_TAG_APP_DOMAIN, $_BORDER_COLOR_TAG_APP_DOMAIN, $_BORDER_COLOR_TAG_APP_DOMAIN_EDIT, $_COLOR_TEXT_TAG_APP_DOMAIN, $_COLOR_ICON_TAG_APP_DOMAIN, $_BACKGROUND_COLOR_TAG_DEFAULT, $_BORDER_COLOR_TAG_DEFAULT, $_BORDER_COLOR_TAG_DEFAULT_EDIT, $_COLOR_TEXT_TAG_DEFAULT, $_COLOR_ICON_TAG_DEFAULT, $_BACKGROUND_COLOR_TAG_ERROR, $_BORDER_COLOR_TAG_ERROR, $_BORDER_COLOR_TAG_ERROR_EDIT, $_COLOR_TEXT_TAG_ERROR, $_COLOR_ICON_TAG_ERROR){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    .tag-item{
      color: $_COLOR_TEXT_TAG_DEFAULT;

      &.tag-app-domain{
        background-color: $_BACKGROUND_COLOR_TAG_APP_DOMAIN;
        border-color: $_BORDER_COLOR_TAG_APP_DOMAIN;

        &.tag-expanded{
          border-color: $_BORDER_COLOR_TAG_APP_DOMAIN_EDIT;
        }

        a{
          color: $_COLOR_TEXT_TAG_APP_DOMAIN;

          &.icon-exit{
            color: $_COLOR_ICON_TAG_APP_DOMAIN;
          }
        }
      }

      &.tag-default{
        background-color: $_BACKGROUND_COLOR_TAG_DEFAULT;
        border-color: $_BORDER_COLOR_TAG_DEFAULT;

        &.tag-expanded{
          border-color: $_BORDER_COLOR_TAG_DEFAULT_EDIT;
        }

        a{
          color: $_COLOR_TEXT_TAG_DEFAULT;

          &.icon-exit{
            color: $_COLOR_ICON_TAG_DEFAULT;
          }
        }
      }

      &.tag-error {
        background-color: $_BACKGROUND_COLOR_TAG_ERROR;
        border-color: $_BORDER_COLOR_TAG_ERROR;

        &.tag-expanded{
          border-color: $_BORDER_COLOR_TAG_ERROR_EDIT;
        }

        a{
          color: $_COLOR_TEXT_TAG_ERROR;

          &.icon-exit{
            color: $_COLOR_ICON_TAG_ERROR;
          }
        }
      }
    }
  }
}
  
@include themable($_THEME_LIGHT, $_BACKGROUND_COLOR_TAG_APP_DOMAIN_LIGHT, $_BORDER_COLOR_TAG_APP_DOMAIN_LIGHT, $_BORDER_COLOR_TAG_APP_DOMAIN_EDIT_LIGHT, $_COLOR_TEXT_TAG_APP_DOMAIN_LIGHT, $_COLOR_ICON_TAG_APP_DOMAIN_LIGHT, $_BACKGROUND_COLOR_TAG_DEFAULT_LIGHT,$_BORDER_COLOR_TAG_DEFAULT_LIGHT, $_BORDER_COLOR_TAG_DEFAULT_EDIT_LIGHT, $_COLOR_TEXT_TAG_DEFAULT_LIGHT, $_COLOR_ICON_TAG_DEFAULT_LIGHT, $_BACKGROUND_COLOR_TAG_ERROR_LIGHT, $_BORDER_COLOR_TAG_ERROR_LIGHT, $_BORDER_COLOR_TAG_ERROR_EDIT_LIGHT, $_COLOR_TEXT_TAG_ERROR_LIGHT, $_COLOR_ICON_TAG_ERROR_LIGHT);
@include themable($_THEME_DARK, $_BACKGROUND_COLOR_TAG_APP_DOMAIN_DARK, $_BORDER_COLOR_TAG_APP_DOMAIN_DARK, $_BORDER_COLOR_TAG_APP_DOMAIN_EDIT_DARK, $_COLOR_TEXT_TAG_APP_DOMAIN_DARK, $_COLOR_ICON_TAG_APP_DOMAIN_DARK, $_BACKGROUND_COLOR_TAG_DEFAULT_DARK, $_BORDER_COLOR_TAG_DEFAULT_DARK, $_BORDER_COLOR_TAG_DEFAULT_EDIT_DARK, $_COLOR_TEXT_TAG_DEFAULT_DARK, $_COLOR_ICON_TAG_DEFAULT_DARK, $_BACKGROUND_COLOR_TAG_ERROR_DARK, $_BORDER_COLOR_TAG_ERROR_DARK, $_BORDER_COLOR_TAG_ERROR_EDIT_DARK, $_COLOR_TEXT_TAG_ERROR_DARK, $_COLOR_ICON_TAG_ERROR_DARK);