@import "variables";

.tbx-about-modal
{
  @extend .modal;

  .tbx-about-modal-dialog
  {
    @extend .modal-dialog;

    .tbx-about-modal-content
    {
      @extend .modal-content;

      box-shadow : 10px 10px 20px 2px rgb(0 0 0 / 10%);

      .tbx-about-modal-header
      {
        @extend .modal-header;

        .tbx-about-header
        {
          display : flex;

          .tbx-about-logo
          {
            background-color   : #428bca;
            margin             : 0 0.5rem 0 0;
            border-radius      : 50%;
            width              : 3.5rem;
            height             : 3.5rem;
            padding            : 0.8rem 0.625rem;
            -webkit-transition : all 100ms linear;
            -moz-transition    : all 100ms linear;
            -o-transition      : all 100ms linear;
            transition         : all 100ms linear;
          }

          .tbx-about-info
          {
            .tbx-about-lacera
            {
              font-size      : 0.75rem;
              text-transform : uppercase;
            }

            .tbx-about-name
            {
              font-size   : 1.375rem;
              font-weight : 600;
              margin-top  : -0.4rem;
            }

            .tbx-about-message
            {
              font-size  : 0.75rem;
              margin-top : -0.4rem;
            }
          }
        }
      }

      .tbx-about-modal-body
      {
        @extend .modal-body;

        .tbx-about-title
        {
          font-size   : 1rem;
          font-weight : bold;
        }

        .tbx-about-text
        {
          font-size : 0.875rem;
        }

        .tbx-about-warning
        {
          position         : relative;
          padding          : .9rem;
          margin           : 1rem 0 0 0;
          border-radius    : 0.25rem;
          color            : #156e89;
          background-color : #d3f1fa;
          border           : #bde9f7;
        }
      }

      .tbx-about-modal-footer
      {
        @extend .modal-footer;

        flex-wrap : nowrap;

        .tbx-about-legal
        {
          text-align : left;
          font-size  : 0.8rem;
        }

        .tbx-about-warning
        {
          color       : $red;
          font-weight : bold;
        }

        .tbx-about-button
        {
          display          : inline-block;
          font-weight      : 400;
          line-height      : 1.5;
          text-align       : center;
          text-decoration  : none;
          vertical-align   : middle;
          user-select      : none;
          border           : 1px solid $primary-border-subtle;
          padding          : 0.375rem 0.75rem;
          font-size        : 0.875rem;
          border-radius    : 0.25rem;

          color            : $primary-text-emphasis;
          background-color : $primary-bg-subtle;
        }
      }
    }
  }
}