button-link {
  .button-link {
    display: flex;
    align-items: center;
    flex-direction: column;

    p {
      font-family: "Raleway", sans-serif;
      font-size: 1rem;
      font-weight: 600;
      color: var(--ion-color-contrast);
    }

    .label {
      height: fit-content;
      &:empty {
        min-width: 20px;
        min-height: 20px;
      }
    }

    .circle {
      border: 2px solid var(--ion-color-primary);
      border-top: 2px dashed var(--ion-color-primary);
      border-bottom: 2px dotted var(--ion-color-primary);
      border-radius: 50%;
      padding: 3px;
      margin: 10px 30%;
      // background: none !important;

      .container-button {
        font-size: 1.9em;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .oval {
      border: 3px solid var(--ion-color-secondary);
      padding: 0px 15px;
      margin: 10px 0;
      border-radius: 30px;

      .container-button {
        font-size: 2em;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .square {
      width: 70px;
      height: 70px;
      margin: 10px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.9em;
    }

    .circleborder {
      border: 8px solid var(--ion-color-primary);
      background: var(--ion-color-primary);
      border-radius: 50%;
      width: 70px;
      height: 70px;
      margin: 10px 0;

      .container-button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        font-size: 2.1em;
      }
    }

    .box-shadow {
      border: 7px solid var(--ion-color-contrast);
      border-radius: 50%;
      width: 70px;
      height: 70px;
      margin: 10px 0;
      display: flex;
      justify-content: center;
      align-items: center;

      .container-button {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0px -2px 0px 3px #78449c;
        font-size: 1.9em;
      }
    }

    .multi-box {
      border: 7px solid var(--ion-color-contrast);
      border-radius: 50%;
      width: 60px;
      height: 60px;
      margin: 10px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: -2px -1px 0px 3px var(--ion-color-secondary);

      .container-button {
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0px -2px 0px 3px var(--ion-color-background);

        i {
          color: var(--ion-color-Buttom);
          font-size: 1.9em;
        }
      }
    }

    .circletrans {
      display: grid;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      margin: 10px 30%;
      border: 8px solid var(--ion-color-Buttom);

      .container-button {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;

        i {
          font-size: 2.1em;
        }
      }
    }

    .circleborder-internal {
      border: 5px solid var(--ion-color-contrast);
      border-radius: 50%;
      width: 70px;
      height: 70px;
      margin: 10px 30%;

      .container-button {
        font-size: 2em;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid var(--ion-color-secondary);
      }
    }

    .cylinder {
      display: flex !important;
      flex-direction: row;
      width: 90% !important;
      text-align: center;
      align-items: center;
      justify-content: center;
      padding: 15px;
      margin: 15px auto;
      border-radius: 50px !important;

      p {
        margin: 0 auto;
        font-family: "Raleway", sans-serif;
        font-weight: 600;
      }

      a {
        font-size: 1.5em;
        display: flex;
        width: 100%;
        color: var(--ion-color-contrast);
      }
    }

    .bigSquare {
      display: flex !important;
      width: 90% !important;
      height: 80px !important;
      border-radius: 10px;
      margin: 10px 0;

      p {
        margin: 10px;
      }

      a {
        font-size: 2em;
        margin: auto;
      }
    }
  }
}

dvb-shapes {
  .dvb-shapes > .popup__container > .popup__body {
    .circle {
      border: 2px solid var(--ion-color-primary);
      border-top: 2px dashed var(--ion-color-primary);
      border-bottom: 2px dotted var(--ion-color-primary);
      border-radius: 50%;
      padding: 3px;
      margin: 10px 30%;

      .container-button {
        font-size: 1.9em;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .oval {
      border: 3px solid var(--ion-color-secondary);
      padding: 0px 15px;
      margin: 10px 0;
      border-radius: 30px;

      .container-button {
        font-size: 2em;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .square {
      width: 70px;
      height: 70px;
      margin: 10px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.9em;
    }

    .circleborder {
      border: 8px solid var(--ion-color-primary);
      background: var(--ion-color-primary);
      border-radius: 50%;
      width: 70px;
      height: 70px;
      margin: 10px 0;

      .container-button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        font-size: 2.1em;
      }
    }

    .box-shadow {
      border: 7px solid var(--ion-color-contrast);
      border-radius: 50%;
      width: 70px;
      height: 70px;
      margin: 10px 0;
      display: flex;
      justify-content: center;
      align-items: center;

      .container-button {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0px -2px 0px 3px #78449c;
        font-size: 1.9em;
      }
    }

    .multi-box {
      border: 7px solid var(--ion-color-contrast);
      border-radius: 50%;
      width: 60px;
      height: 60px;
      margin: 10px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: -2px -1px 0px 3px var(--ion-color-secondary);

      .container-button {
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0px -2px 0px 3px var(--ion-color-background);

        i {
          color: var(--ion-color-Buttom);
          font-size: 1.9em;
        }
      }
    }

    .circletrans {
      display: grid;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      margin: 10px 30%;
      border: 8px solid var(--ion-color-Buttom);

      .container-button {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;

        i {
          font-size: 2.1em;
        }
      }
    }

    .circleborder-internal {
      border: 5px solid var(--ion-color-contrast);
      border-radius: 50%;
      width: 70px;
      height: 70px;
      margin: 10px 30%;

      .container-button {
        font-size: 2em;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid var(--ion-color-secondary);
      }
    }

    .cylinder {
      display: flex !important;
      flex-direction: row;
      width: 90% !important;
      text-align: center;
      align-items: center;
      justify-content: center;
      padding: 15px;
      margin: 15px auto;
      border-radius: 50px !important;

      p {
        margin: 0 auto;
        font-family: "Raleway", sans-serif;
        font-weight: 600;
      }

      a {
        font-size: 1.5em;
        display: flex;
        width: 100%;
        color: var(--ion-color-contrast);
      }
    }

    .bigSquare {
      display: flex !important;
      width: 90% !important;
      height: 100px !important;
      border-radius: 10px;
      margin: 10px 0;

      p {
        margin: 10px;
      }

      a {
        font-size: 2em;
        margin: auto;
      }
    }
  }
}